CSS: Bulk Archives -> Fix responsive input

bookmark-org · Jun 26, 2023 · a59fdd7 · a59fdd7
1 parent e495e7c
commit a59fdd7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -970,3 +970,10 @@ body {
 }
 
 
+
+
+/*****************************************  Bulk Archives **************************************/
+
+@media screen and (max-width: 350px) {.responsive-form {width: auto;}}
+@media screen and (min-width: 350px) {.responsive-form {width: 300px;}}
+@media screen and (min-width: 550px) {.responsive-form {width: 500px;}}
diff --git a/lib/bookmark_web/live/bulk_archives.ex b/lib/bookmark_web/live/bulk_archives.ex
@@ -24,11 +24,11 @@ defmodule BookmarkWeb.BulkArchivesLive do
               <% end %>
             </ul>
         <% else %>
-          <.form for={@form} phx-submit="save">
+          <.form for={@form} phx-submit="save" class="responsive-form">
             <textarea placeholder="Paste your URLs here, one per line:
             https://www.example.com/
             https://www.google.com/"
-            name="urls" style="height: 100px; width: 500px; background-color: white; font-size: 16px;"><%= if  @links, do: @links%></textarea>
+            name="urls" style="height: 100px; width: 100%; background-color: white; font-size: 16px;"><%= if  @links, do: @links%></textarea>
 
             <button class="donate-button">Bulk archive</button>
           </.form>