Improved mobile layout for landscape. Oneline header.

cista-front/src/assets/main.css

@@ -8,6 +8,8 @@
   --primary-color: #000;
   --accent-color: #f80;
   --transition-time: 0.2s;
+  --header-font-size: 1rem;
+  --header-height: calc(8 * var(--header-font-size));
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -23,6 +25,18 @@
     display: none;
   }
 }
+@media screen and (orientation: landscape) and (min-width: 600px) {
+  /* Breadcrumbs and buttons side by side */
+  header {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .breadcrumb {
+    font-size: 1.7em;
+  }
+}
 @media screen and (min-width: 800px) and (--webkit-min-device-pixel-ratio: 2) {
   html {
     font-size: 1.5rem;
@@ -39,6 +53,17 @@
     font-size: 2rem;
   }
 }
+@media screen and (max-height: 600px) {
+  :root {
+    --header-font-size: calc(16 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
+  }
+}
+@media screen and (max-height: 300px) {
+  :root {
+    --header-font-size: 0.5rem;  /* Don't go smaller than this, no benefit */
+    --header-height: calc(1.75 * 16px);
+  }
+}
 @media print {
   :root {
     --primary-color: black;
@@ -90,7 +115,9 @@
     left: 0;
   }
 }
-
+html {
+  overflow: hidden;
+}
 /* Hide scrollbar for all browsers */
 main::-webkit-scrollbar {
   display: none;
@@ -113,6 +140,7 @@ tbody .modified {
 header {
   background-color: var(--header-background);
   color: var(--header-color);
+  font-size: var(--header-font-size);
 }
 main {
   height: 100%;
@@ -162,8 +190,8 @@ nav {
   z-index: 10;
 }
 main {
-  height: calc(100svh - 9rem); /* fill almost the rest of the screen after header */
+  height: calc(100svh - var(--header-height));
-  padding-bottom: 3rem; /* convenience space on the bottom */
+  padding-bottom: 3em; /* convenience space on the bottom */
   overflow-y: scroll;
 }
 [data-tooltip]:hover:after {
@@ -174,8 +202,8 @@ main {
   text-align: center;
   padding: .5rem 1rem;
   border-radius: 3rem 0 3rem 0;
-  box-shadow: 0 0 2rem var(--accent-color);
+  box-shadow: 0 0 1rem var(--accent-color);
-  transform: translate(calc(1rem + -50%), 150%);
+  transform: translate(calc(1rem + -50%), 100%);
   background-color: var(--accent-color);
   color: var(--primary-color);
   white-space: pre;

cista-front/src/components/BreadCrumb.vue

@@ -32,22 +32,21 @@ const props = defineProps<{
   padding: 0 1em 0 0;
 }
 .breadcrumb > a {
-  margin: 0 -0.7rem 0 -0.7rem;
+  margin: 0 -0.5em 0 -0.5em;
   padding: 0;
-  max-width: 8rem;
+  max-width: 8em;
-  font-size: 1.3rem;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  height: 1.5rem;
+  height: 1.5em;
   color: var(--breadcrumb-color);
-  padding: 0.3rem 1.5rem;
+  padding: 0.3em 1.5em;
-  clip-path: polygon(0 0, 1rem 50%, 0 100%, 100% 100%, 100% 0, 0 0);
+  clip-path: polygon(0 0, 1em 50%, 0 100%, 100% 100%, 100% 0, 0 0);
   transition: all var(--breadcrumb-transtime);
 }
 .breadcrumb a:first-child {
   margin-left: 0;
-  padding-left: .2rem;
+  padding-left: .2em;
   clip-path: none;
 }
 .breadcrumb a:last-child {
@@ -74,9 +73,9 @@ const props = defineProps<{
 }
 .breadcrumb svg {
   /* FIXME: Custom positioning to align it well; needs proper solution */
-  padding-left: 0.6rem;
+  padding-left: 0.8em;
-  width: 1.3rem;
+  width: 1.3em;
-  height: 1.3rem;
+  height: 1.3em;
   fill: var(--breadcrumb-color);
   transition: fill var(--breadcrumb-transtime);
 }

cista-front/src/components/FileExplorer.vue

@@ -356,9 +356,9 @@ tbody tr {
 }
 table thead input[type='checkbox'] {
   position: inherit;
-  width: 1rem;
+  width: 1em;
-  height: 1rem;
+  height: 1em;
-  padding: 0.5rem;
+  padding: 0.5rem 0.5em;
 }
 table tbody input[type='checkbox'] {
   width: 2rem;
@@ -366,7 +366,6 @@ table tbody input[type='checkbox'] {
 }
 table .selection {
   width: 2rem;
-  height: 2rem;
   text-align: center;
   text-overflow: clip;
 }
@@ -429,18 +428,18 @@ tbody tr.cursor {
   color: var(--accent-color);
 }
 .sortcolumn {
-  padding-right: 1.7em;
+  padding-right: 1.5rem;
 }
 .sortcolumn::after {
   content: '▸';
   color: #888;
-  margin: 0 1em 0 0.5em;
+  margin-left: 0.5em;
   position: absolute;
   transition: all var(--transition-time) linear;
 }
 .sortactive::after {
   transform: rotate(90deg);
-  color: #000;
+  color: var(--accent-color);
 }
 .name a {
   text-decoration: none;

cista-front/src/components/HeaderMain.vue

@@ -57,7 +57,7 @@ defineExpose({
   padding: 0;
   display: flex;
   align-items: center;
-  height: 3.5rem;
+  height: 3.5em;
   z-index: 10;
 }
 .buttons > * {
@@ -70,10 +70,10 @@ input[type='search'] {
   background: var(--primary-background);
   color: var(--primary-color);
   border: 0;
-  border-radius: 0.1rem;
+  border-radius: 0.1em;
-  padding: 0.5rem;
+  padding: 0.5em;
   outline: none;
-  font-size: 1.5rem;
+  font-size: 1.5em;
   max-width: 30vw;
 }
 </style>

cista-front/src/components/SvgButton.vue

@@ -22,9 +22,9 @@ const icon = defineAsyncComponent(() => import(`@/assets/svg/${props.name}.svg`)
   color: #ccc;
   cursor: pointer;
   transition: all 0.2s ease;
-  padding: 0.2rem;
+  padding: 0.2em;
-  width: 3rem;
+  width: 3em;
-  height: 3rem;
+  height: 3em;
 }
 .action-button:hover,
 .action-button:focus {