fix(webui): various mobile improvements (#23)

webui/src/components/BrowseColumn.svelte

@@ -26,6 +26,9 @@
   }
 
   let width = 460;
+  if (window.innerWidth < 600) {
+    width = window.innerWidth - 6;
+  }
   function drag(ev: MouseEvent) {
     const startWidth = width;
     const startX = ev.screenX;
@@ -95,10 +98,12 @@
     width: 100%;
 
     .view {
-      min-width: 75vw;
-      max-width: 1920px;
-      margin-left: auto;
-      margin-right: auto;
+      @media screen and (min-width: 600px) {
+        min-width: 75vw;
+        max-width: 1920px;
+        margin-left: auto;
+        margin-right: auto;
+      }
     }
   }
 
@@ -138,5 +143,9 @@
     cursor: ew-resize;
     height: 100%;
     width: 0.5rem;
+
+    @media screen and (max-width: 600px) {
+      display: none;
+    }
   }
 </style>

webui/src/components/layout/Header.svelte

@@ -44,7 +44,7 @@
   <h1>
     <Link to="/">
       <img class="logo" src="assets/upend.svg" alt="UpEnd logo" />
-      UpEnd
+      <div class="name">UpEnd</div>
     </Link>
   </h1>
   <div class="input">
@@ -75,7 +75,7 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: .5rem;
+    padding: 0.5rem;
     height: 3.5rem;
     border-bottom: 1px solid var(--foreground);
 
@@ -107,6 +107,13 @@
 
     .input {
       flex-grow: 1;
+      min-width: 3rem;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .name {
+      display: none;
     }
   }
 </style>

webui/src/styles/common.scss

@@ -38,8 +38,13 @@ select {
     display: none;
   }
 
-  &.disabled, &:disabled {
+  &.disabled,
+  &:disabled {
     pointer-events: none;
     opacity: 0.7;
   }
+
+  @media screen and (max-width: 600px) {
+    padding: 0.5em;
+  }
 }

webui/src/views/Browse.svelte

@@ -94,9 +94,15 @@
     display: flex;
     overflow-x: auto;
     gap: 1rem;
+
+    @media screen and (max-width: 600px) {
+      scroll-snap-type: x mandatory;
+    }
   }
 
   .column {
-    display: contents;
+    display: flex;
+    justify-content: center;
+    scroll-snap-align: center;
   }
 </style>

webui/src/views/Home.svelte

@@ -227,6 +227,10 @@
     & > * {
       flex-basis: 50%;
     }
+
+    @media screen and (max-width: 600px) {
+      flex-direction: column;
+    }
   }
 
   .roots {