styling/Make modals responsive

Author: LewisYoul

app/views/layouts/modal.html.erb

@@ -33,7 +33,7 @@
         From: "opacity-100 translate-y-0 sm:scale-100"
         To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
     -->
-    <div class="z-10 relative mt-2 inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline" data-modal-target="body">
+    <div class="z-10 relative mt-2 inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle w-full sm:max-w-2xl sm:w-full sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline" data-modal-target="body">
       <span data-action="click->modal#close" title="Close modal" class="hover:bg-cyan-hover transition cursor-pointer absolute z-12 -top-4 -right-5 inline-flex items-center p-1 border border-transparent rounded-full shadow-sm text-white bg-cyan mr-2">
         <%= render partial: 'shared/icons/close', locals: { height: 7, width: 7, color: 'text-white' } %>
       </span>

app/views/modals/snippets/edit.html.erb

@@ -12,20 +12,25 @@
     class="mt-4"
   >
     <%= form_for @snippet, remote: true, html: { data: { type: "html", action: "ajax:success->snippets#onUpdateSuccess ajax:error->snippets#onUpdateError" } } do |f| %>
+
       <div>
-        <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet title...", class: "block w-full mb-4 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
-        <%= f.text_area :body, { data: { codemirror_target: 'mirror' }, class: "font-mono h-80 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
+        <%= f.text_field :description, { class: "new-snippet--description", placeholder: "Snippet title...", class: "block sm:w-full mb-4 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-sm" } %>
+        <%= f.text_area :body, { data: { codemirror_target: 'mirror' }, class: "font-mono h-80 block sm:w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block sm:text-sm border-gray-300 rounded-sm" } %>
       </div>
 
-      <div class="flex mt-4">
+      <div class="flex mt-4 flex-wrap">
         <div class="flex flex-1 items-center">
           <%= render partial: 'shared/form/toggle', locals: { form: f, field: :public, enabled_text: 'Private', disabled_text: 'Public', enabled: !@snippet.public, flip: true } %>
         </div>
 
-        <div class="flex flex-auto justify-end">
-          <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
-          <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "ml-1 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
-          <%= f.submit 'Update', class: "button--cta-primary ml-4" %>
+        <div class="flex flex-auto justify-end mt-2 sm:mt-0">
+          <div class="flex flex-wrap">
+            <%= f.select :language_id, options_from_collection_for_select(@languages, :id, :name, @snippet.language_id), { prompt: 'Select language...' }, class: "mr-1 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm", data: { action: 'change->codemirror#updateMode' } %>
+            <%= f.select :folder_id, options_from_collection_for_select(@folders, :id, :name, @folder.id), { prompt: 'Select folder...' }, { class: "mt-1 sm:mt-0 block w-40 pl-3 pr-10 py-1 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-sm" } %>
+          </div>
+          <div class="flex items-end">
+            <%= f.submit 'Update', class: "button--cta-primary ml-4" %>
+          </div>
         </div>
       </div>
     <% end %>