fix search box layout on small screens when tv show is selected #443

Author: FuzzyGrim

src/static/css/main.css

@@ -961,9 +961,6 @@
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
-  .w-32 {
-    width: calc(var(--spacing) * 32);
-  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -1018,6 +1015,9 @@
   .max-w-\[98\%\] {
     max-width: 98%;
   }
+  .max-w-\[110px\] {
+    max-width: 110px;
+  }
   .max-w-\[250px\] {
     max-width: 250px;
   }
@@ -2474,11 +2474,21 @@
       }
     }
   }
+  .sm\:w-32 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 32);
+    }
+  }
   .sm\:w-auto {
     @media (width >= 40rem) {
       width: auto;
     }
   }
+  .sm\:max-w-none {
+    @media (width >= 40rem) {
+      max-width: none;
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2504,6 +2514,16 @@
       justify-content: space-between;
     }
   }
+  .sm\:px-4 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:whitespace-normal {
+    @media (width >= 40rem) {
+      white-space: normal;
+    }
+  }
   .md\:absolute {
     @media (width >= 48rem) {
       position: absolute;

src/templates/base.html

@@ -227,8 +227,8 @@ <h1 class="text-2xl font-semibold text-gray-100">Yamtrack</h1>
                       <button type="button"
                               @click="isOpen = !isOpen"
                               @click.away="isOpen = false"
-                              class="flex items-center justify-between w-32 px-4 py-2 text-sm text-gray-300 bg-[#272c31] rounded-r-md focus:outline-none focus:ring-2 focus:ring-[#4a9eff] focus:ring-inset hover:bg-[#2a2e33] transition-colors duration-200 cursor-pointer">
-                        <span x-text="selectedType.display"></span>
+                              class="flex items-center justify-between max-w-[110px] sm:max-w-none sm:w-32 px-2 sm:px-4 py-2 text-sm text-gray-300 bg-[#272c31] rounded-r-md focus:outline-none focus:ring-2 focus:ring-[#4a9eff] focus:ring-inset hover:bg-[#2a2e33] transition-colors duration-200 cursor-pointer">
+                        <span class="truncate sm:whitespace-normal" x-text="selectedType.display"></span>
                         <svg class="w-4 h-4 ml-2"
                              fill="none"
                              stroke="currentColor"