Fixed header and breadcrumb layout and issues.

frontend/src/assets/main.css

@@ -37,12 +37,6 @@
   :root {
     --root-font-size: calc(8px + 8 * 100vw / 1000);
   }
-  header .buttons:has(input[type='search']) > div {
-    display: none;
-  }
-  header .buttons > div:has(input[type='search']) {
-    display: inherit;
-  }
 }
 @media screen and (min-width: 2000px) {
   :root {
@@ -78,17 +72,13 @@
   }
   header {
     display: flex;
-    flex-direction: row-reverse;
     justify-content: space-between;
-    align-items: end;
   }
-  header .breadcrumb {
+  header .headermain { order: 1; }
-    flex-shrink: 1;
+  header .breadcrumb { align-self: stretch; }
-  }
+  header .action-button {
-  header .breadcrumb > * {
+    width: 2em;
-    flex-shrink: 1;
+    height: 2em;
-    padding-top: 1rem !important;
-    padding-bottom: 1rem !important;
   }
 }
 @media print {
@@ -142,6 +132,9 @@
     left: 0;
   }
 }
+* {
+  box-sizing: border-box;
+}
 html {
   font-size: var(--root-font-size);
   overflow: hidden;

frontend/src/components/BreadCrumb.vue

@@ -12,6 +12,8 @@
       :ref="el => setLinkRef(0, el)"
       :class="{ current: !!isCurrent(0) }"
       :aria-current="isCurrent(0)"
+      @click.prevent="navigate(0)"
+      title="/"
     >
       <component :is="home" />
     </a>
@@ -21,6 +23,7 @@
         :aria-current="isCurrent(index + 1)"
         @click.prevent="navigate(index + 1)"
         :ref="el => setLinkRef(index + 1, el)"
+        :title="`/${longest.slice(0, index + 1).join('/')}`"
       >{{ location }}</a>
     </template>
   </nav>
@@ -101,27 +104,31 @@ watchEffect(() => {
   --breadcrumb-transtime: 0.3s;
 }
 .breadcrumb {
+  flex: 1 1 auto;
   display: flex;
-  list-style: none;
+  min-width: 20%;
+  max-width: 100%;
+  min-height: 2em;
   margin: 0;
   padding: 0 1em 0 0;
 }
 .breadcrumb > a {
+  display: flex;
+  align-items: center;
   margin: 0 -0.5em 0 -0.5em;
   padding: 0;
   max-width: 8em;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  height: 1.5em;
   color: var(--breadcrumb-color);
   padding: 0.3em 1.5em;
   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: 1.5em;
-  padding-left: .2em;
+  padding-right: 1.7em;
   clip-path: none;
 }
 .breadcrumb a:last-child {
@@ -148,9 +155,9 @@ watchEffect(() => {
 }
 .breadcrumb svg {
   /* FIXME: Custom positioning to align it well; needs proper solution */
-  padding-left: 0.8em;
   width: 1.3em;
   height: 1.3em;
+  margin: -.5em;
   fill: var(--breadcrumb-color);
   transition: fill var(--breadcrumb-transtime);
 }

frontend/src/components/HeaderMain.vue

@@ -1,31 +1,29 @@
 <template>
-  <nav class="headermain">
+  <nav class="headermain buttons">
-    <div class="buttons">
+    <template v-if="store.error">
-      <template v-if="store.error">
+      <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
-        <div class="error-message" @click="store.error = ''">{{ store.error }}</div>
+      <div class="smallgap"></div>
-        <div class="smallgap"></div>
+    </template>
-      </template>
+    <UploadButton :path="props.path" />
-      <UploadButton :path="props.path" />
+    <SvgButton
-      <SvgButton
+      name="create-folder"
-        name="create-folder"
+      data-tooltip="New folder"
-        data-tooltip="New folder"
+      @click="() => store.fileExplorer!.newFolder()"
-        @click="() => store.fileExplorer!.newFolder()"
+    />
+    <slot></slot>
+    <div class="spacer smallgap"></div>
+    <template v-if="showSearchInput">
+      <input
+        ref="search"
+        type="search"
+        :value="query"
+        @input="updateSearch"
+        placeholder="Search words"
+        class="margin-input"
       />
-      <slot></slot>
+    </template>
-      <div class="spacer smallgap"></div>
+    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-      <template v-if="showSearchInput">
+    <SvgButton name="cog" @click="settingsMenu" />
-        <input
-          ref="search"
-          type="search"
-          :value="query"
-          @input="updateSearch"
-          placeholder="Search words"
-          class="margin-input"
-        />
-      </template>
-      <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-      <SvgButton name="cog" @click="settingsMenu" />
-    </div>
   </nav>
 </template>
 
@@ -93,24 +91,18 @@ defineExpose({
 
 <style scoped>
 .buttons {
+  flex: 1000 0 auto;
   padding: 0;
   display: flex;
   align-items: center;
-  height: 3.5em;
   z-index: 10;
 }
-.buttons > * {
-  flex-shrink: 1;
-}
 input[type='search'] {
   background: var(--input-background);
   color: var(--input-color);
   border: 0;
   border-radius: 0.1em;
-  padding: 0.5em;
   outline: none;
-  font-size: 1.5em;
+  max-width: 15ch;
-  max-width: 30vw;
 }
 </style>
-@/stores/main