Fix scaling and mobile layouts

cista-front/src/assets/main.css

@@ -5,6 +5,8 @@
   --primary-background: #ddd;
   --header-background: var(--soft-color);
   --header-color: #ccc;
+  --input-background: #fff;
+  --input-color: #000;
   --primary-color: #000;
   --soft-color: #146;
   --accent-color: #f80;
@@ -12,7 +14,7 @@
   /* The following are overridden by responsive layouts */
   --root-font-size: 1rem;
   --header-font-size: 1rem;
-  --header-height: calc(8 * var(--header-font-size));
+  --header-height: calc(6.5 * var(--header-font-size));
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -20,30 +22,20 @@
     --primary-background: var(--soft-color);
     --header-background: #000;
     --header-color: #ccc;
+    --input-background: var(--soft-color);
+    --input-color: #ddd;
     }
 }
 @media screen and (max-width: 600px) {
   .size,
-  .modified {
+  .modified,
+  .summary {
     display: none;
   }
 }
-@media screen and (orientation: landscape) and (min-width: 1200px) {
-  /* Breadcrumbs and buttons side by side */
-  header {
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: end;
-  }
-  header .breadcrumb {
-    font-size: 1.7em;
-    flex-shrink: 10;
-  }
-}
-@media screen and (min-width: 800px) and (--webkit-min-device-pixel-ratio: 2) {
+@media screen and (min-width: 1000px) {
   :root {
-    --root-font-size: calc(16 * 100vw / 800);
+    --root-font-size: calc(8px + 8 * 100vw / 1000);
   }
   header .buttons:has(input[type='search']) > div {
     display: none;
@@ -52,20 +44,51 @@
     display: inherit;
   }
 }
-@media screen and (min-width: 1600px) and (--webkit-min-device-pixel-ratio: 3) {
+@media screen and (min-width: 2000px) {
   :root {
-    --root-font-size: 2rem;
+    --root-font-size: 1.5rem;
   }
 }
+/* Low (landscape) screens: smaller header */
 @media screen and (max-height: 600px) {
   :root {
-    --header-font-size: calc(16 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
+    --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
+    --root-font-size: 0.8rem;
+  }
+  header .breadcrumb > * {
+    padding-top: calc(8 + 8 * 100vh / 600) !important;
+    padding-bottom: calc(8 + 8 * 100vh / 600) !important;
   }
 }
 @media screen and (max-height: 300px) {
   :root {
-    --header-font-size: 0.5rem;  /* Don't go smaller than this, no benefit */
+    --header-font-size: 15px;  /* Don't go smaller than this, no benefit */
     --header-height: calc(1.75 * 16px);
+    --root-font-size: 0.6rem;
+  }
+  header .breadcrumb > * {
+    padding-top: 14px !important;
+    padding-bottom: 14px !important;
+  }
+}
+@media screen and (orientation: landscape) and (min-width: 700px) {
+  /* Breadcrumbs and buttons side by side */
+  :root {
+    --header-font-size: calc(8px + 8 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
+  }
+  header {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: end;
+  }
+  header .breadcrumb {
+    flex-shrink: 1;
+  }
+  header .breadcrumb > * {
+    flex-shrink: 1;
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
   }
 }
 @media print {
@@ -120,6 +143,7 @@
   }
 }
 html {
+  font-size: var(--root-font-size);
   overflow: hidden;
 }
 /* Hide scrollbar for all browsers */
@@ -199,7 +223,7 @@ main {
   overflow-y: scroll;
 }
 .spacer { flex-grow: 1 }
-.smallgap { margin-left: 2em }
+.smallgap { flex-shrink: 1; width: 2em }
 
 [data-tooltip]:hover:after {
   z-index: 101;

cista-front/src/components/FileExplorer.vue

@@ -442,6 +442,7 @@ table td {
   }
 }
 thead tr {
+  font-size: var(--header-font-size);
   background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
   color: #000;
   box-shadow: 0 0 .2rem black;

cista-front/src/components/HeaderMain.vue

@@ -88,8 +88,8 @@ defineExpose({
   flex-shrink: 1;
 }
 input[type='search'] {
-  background: var(--primary-background);
-  color: var(--primary-color);
+  background: var(--input-background);
+  color: var(--input-color);
   border: 0;
   border-radius: 0.1em;
   padding: 0.5em;

cista-front/src/components/HeaderSelected.vue

@@ -146,7 +146,7 @@ const download = async () => {
 <style>
 .select-text {
   color: var(--accent-color);
-  text-wrap: nowrap;
+  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }