Merge pull request #96 from bookmark-org/83-ui-bug-bulk-archive-page-…

…on-mobile 83 UI bug bulk archive page on mobile
bookmark-org · Jun 27, 2023 · fa77c47 · fa77c47
2 parents e522055 + a59fdd7
commit fa77c47
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -32,13 +32,16 @@
 }
 
 .donate-button {
-  height: 66px;
+  height: auto;
+  line-height: 1.5;
   font-size: 23px;
   font-weight: bold; 
   border-radius: 10px;
   color: #ce0000;
   background-color: black;
-  border: 1px solid white; 
+  border: 1px solid white;
+  white-space: normal;
+  word-wrap: break-word;
 }
 
 .go-button {
@@ -967,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>