From 4488412b41f93ba3e32383e47743849fd1b985e8 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Wed, 4 Feb 2026 19:20:32 +0100
Subject: [PATCH 01/10] burger menu

---
 src/views/minor/NavBar.vue | 497 +++++++++++++++++++------------------
 1 file changed, 258 insertions(+), 239 deletions(-)

diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index f309943a..1d9e8a7f 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -1,272 +1,291 @@
 <template>
-    <header>
-        <nav>
-            <div id="navbar-main">
-                <a href="/doc/doc/about/">
-                    <img :src="LogoWithMicroscope" alt="A microscope icon.">
-                </a>
-                <button
-                    id="navbar-toggler"
-                    type="button"
-                    aria-controls="navbarSupportedContent"
-                    :aria-expanded="menuOpen"
-                    aria-label="Toggle navigation."
-                    @click="toggleMenu">
-                    <span class="material-icons-sharp">menu</span>
-                </button>
+  <header>
+    <nav>
+      <div id="navbar-main">
+        <a href="/doc/doc/about/">
+          <img :src="LogoWithMicroscope" alt="A microscope icon." />
+        </a>
+        <button
+          id="navbar-toggler"
+          type="button"
+          aria-controls="navbarSupportedContent"
+          :aria-expanded="menuOpen"
+          aria-label="Toggle navigation."
+          @click="toggleMenu"
+        >
+          <span class="material-icons-sharp">menu</span>
+        </button>
+      </div>
+      <slot class="specimen-bar" />
+      <div class="burger-menu">
+        <div id="navbar-links" :class="{ open: menuOpen }">
+          <RouterLink class="nav-link" to="/gallery" @click="closeMenu">
+            Gallery
+          </RouterLink>
+          <div class="help-popper">
+            <a href="/doc/">Help</a>
+            <div id="help-popup" class="shadowed">
+              <div class="nav-link">
+                <a href="/doc/doc/user_guide/">User Guide</a>
+              </div>
+              <div class="leftdented">
+                <a class="nav-link" :href="vizLink()">
+                  {{ specimen.visualizerName() }}
+                  Visualizer </a
+                >┤
+              </div>
+              <div class="leftdented tweakup">
+                <a class="nav-link" :href="seqLink()">
+                  {{ seqWord() }} Sequence </a
+                >┘
+              </div>
+              <div class="nav-link">
+                <a href="/doc/">Full Documentation</a>
+              </div>
             </div>
-            <slot class="specimen-bar" />
-            <div class="burger-menu">
-                <div id="navbar-links" :class="{open: menuOpen}">
-                    <RouterLink
-                        class="nav-link"
-                        to="/gallery"
-                        @click="closeMenu">
-                        Gallery
-                    </RouterLink>
-                    <div class="help-popper">
-                        <a href="/doc/">Help</a>
-                        <div id="help-popup" class="shadowed">
-                            <div class="nav-link">
-                                <a href="/doc/doc/user_guide/">User Guide</a>
-                            </div>
-                            <div class="leftdented">
-                                <a class="nav-link" :href="vizLink()">
-                                    {{ specimen.visualizerName() }}
-                                    Visualizer </a>┤
-                            </div>
-                            <div class="leftdented tweakup">
-                                <a class="nav-link" :href="seqLink()">
-                                    {{ seqWord() }} Sequence </a>┘
-                            </div>
-                            <div class="nav-link">
-                                <a href="/doc/">Full Documentation</a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="close material-icons-sharp">close</div>
-            </div>
-        </nav>
-    </header>
+          </div>
+        </div>
+        <div class="close material-icons-sharp">close</div>
+      </div>
+    </nav>
+  </header>
 </template>
 
 <script setup lang="ts">
-    import {ref} from 'vue'
-    import type {PropType, UnwrapNestedRefs} from 'vue'
-    import {RouterLink} from 'vue-router'
+import { ref } from "vue";
+import type { PropType, UnwrapNestedRefs } from "vue";
+import { RouterLink } from "vue-router";
+
+import LogoWithMicroscope from "@/assets/img/logo.svg";
+import type { Specimen } from "@/shared/Specimen";
+
+const props = defineProps({
+  specimen: {
+    type: Object as PropType<UnwrapNestedRefs<Specimen>>,
+    required: true,
+  },
+});
+
+const menuOpen = ref(false);
 
-    import LogoWithMicroscope from '@/assets/img/logo.svg'
-    import type {Specimen} from '@/shared/Specimen'
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value;
+}
 
-    const props = defineProps({
-        specimen: {
-            type: Object as PropType<UnwrapNestedRefs<Specimen>>,
-            required: true,
-        },
-    })
+function closeMenu() {
+  menuOpen.value = false;
+}
+
+function seqWord() {
+  return props.specimen.sequenceName().split(/[\s:]/, 2)[0] || "";
+}
+function seqLink() {
+  return `/doc/src/sequences/${seqWord()}/`;
+}
+function vizLink() {
+  return `/doc/src/visualizers/${props.specimen.visualizerKey}/`;
+}
+</script>
+
+<style scoped lang="scss">
+nav {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 16px 8px 16px;
+  border-bottom: 1px solid var(--ns-color-black);
+  position: relative;
 
-    const menuOpen = ref(false)
+  #navbar-main {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 
-    function toggleMenu() {
-        menuOpen.value = !menuOpen.value
+    #navbar-toggler {
+      background: none;
+      border: none;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
+  }
 
-    function closeMenu() {
-        menuOpen.value = false
+  .close {
+    display: none;
+    font-size: 32px;
+    cursor: pointer;
+  }
+
+  .burger-menu {
+    background-color: var(--ns-color-white);
+    color: var(--ns-color-black);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    &.open {
+      .material-icons-sharp {
+        display: block;
+      }
     }
+  }
 
-    function seqWord() {
-        return props.specimen.sequenceName().split(/[\s:]/, 2)[0] || ''
+  #navbar-links {
+    width: 100%;
+    display: none;
+    flex-direction: column;
+    color: var(--ns-color-black);
+    &.open {
+      display: flex;
+      z-index: 1000;
     }
-    function seqLink() {
-        return `/doc/src/sequences/${seqWord()}/`
+
+    @media (max-width: $mobile-breakpoint) {
+      /* should not push content down */
+      background-color: var(--ns-color-white);
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      padding: 0.2em 0.5em;
     }
-    function vizLink() {
-        return `/doc/src/visualizers/${props.specimen.visualizerKey}/`
+
+    @media (min-width: $mobile-breakpoint) {
+      display: flex;
     }
-</script>
 
-<style scoped lang="scss">
-    nav {
+    @media (min-width: $tablet-breakpoint) {
+      margin-top: 8px;
+    }
+
+    .help-popper {
+      cursor: pointer;
+      font-family: var(--ns-font-display);
+      font-size: var(--ns-size-display);
+      position: relative;
+      padding-right: 0.5em;
+
+      a {
+        font-family: var(--ns-font-display);
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
+      #help-popup {
+        visibility: hidden;
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        padding: 8px 16px 8px 16px;
-        border-bottom: 1px solid var(--ns-color-black);
-
-        #navbar-main {
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            #navbar-toggler {
-                background: none;
-                border: none;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
+        align-items: flex-end;
+        align-content: flex-end;
+        white-space: nowrap;
+        position: absolute;
+        right: 0;
+        width: auto;
+        z-index: 10000;
+        background-color: var(--ns-color-white);
+        opacity: 1;
+        margin-top: 0.3ex;
+        padding-bottom: 0.5ex;
+        padding-top: 0.5ex;
+        border: 1px solid var(--ns-color-black);
+
+        .leftdented {
+          padding-right: 0.5em;
         }
 
-        .close {
-            display: none;
-            font-size: 32px;
-            cursor: pointer;
+        .tweakup {
+          position: relative;
+          bottom: 6px;
         }
 
-        .burger-menu {
-            color: var(--ns-color-black);
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            &.open {
-                .material-icons-sharp {
-                    display: block;
-                }
-            }
+        .nav-link {
+          color: var(--ns-color-black);
+          padding-top: 0ex;
+          padding-bottom: 0ex;
         }
 
-        #navbar-links {
-            width: 100%;
-            display: none;
-            flex-direction: column;
-            margin-top: 8px;
-            color: var(--ns-color-black);
-            &.open {
-                display: flex;
-                z-index: 1000;
-            }
-
-            @media (min-width: $mobile-breakpoint) {
-                display: flex;
-            }
-
-            .help-popper {
-                cursor: pointer;
-                font-family: var(--ns-font-display);
-                font-size: var(--ns-size-display);
-                position: relative;
-                padding-right: 0.5em;
-
-                a {
-                    font-family: var(--ns-font-display);
-                    text-decoration: none;
-                }
-                a:hover {
-                    text-decoration: underline;
-                }
-
-                #help-popup {
-                    visibility: hidden;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: flex-end;
-                    align-content: flex-end;
-                    white-space: nowrap;
-                    position: absolute;
-                    right: 0;
-                    width: auto;
-                    z-index: 10000;
-                    background-color: var(--ns-color-white);
-                    opacity: 1;
-                    margin-top: 0.3ex;
-                    padding-bottom: 0.5ex;
-                    padding-top: 0.5ex;
-                    border: 1px solid var(--ns-color-black);
-
-                    .leftdented {
-                        padding-right: 0.5em;
-                    }
-
-                    .tweakup {
-                        position: relative;
-                        bottom: 6px;
-                    }
-
-                    .nav-link {
-                        color: var(--ns-color-black);
-                        padding-top: 0ex;
-                        padding-bottom: 0ex;
-                    }
-
-                    a {
-                        font-family: var(--ns-font-main);
-                        font-size: var(--ns-size-heading);
-                        text-decoration: none;
-                        padding-right: 0px;
-                    }
-
-                    a:hover {
-                        text-decoration: underline;
-                    }
-                }
-
-                &:hover #help-popup {
-                    visibility: visible;
-                    opacity: 1;
-                }
-            }
-
-            .nav-link {
-                font-family: var(--ns-font-display);
-                font-size: var(--ns-size-display);
-                color: var(--ns-color-black);
-                margin-top: 8px;
-                padding-left: 0.5em;
-                padding-right: 0.5em;
-                padding-top: 0.2ex;
-                padding-bottom: 0.2ex;
-                text-decoration: none;
-
-                &:focus,
-                &:hover {
-                    text-decoration: underline;
-                }
-
-                a:hover {
-                    text-decoration: underline;
-                }
-            }
+        a {
+          font-family: var(--ns-font-main);
+          font-size: var(--ns-size-heading);
+          text-decoration: none;
+          padding-right: 0px;
         }
-    }
-    #logo {
-        img {
-            height: 32px;
+
+        a:hover {
+          text-decoration: underline;
         }
+      }
+
+      &:hover #help-popup {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    .nav-link {
+      font-family: var(--ns-font-display);
+      font-size: var(--ns-size-display);
+      color: var(--ns-color-black);
+      padding-right: 0.5em;
+      padding-bottom: 0.2ex;
+      text-decoration: none;
+
+      @media (min-width: $tablet-breakpoint) {
+        margin-top: 8px;
+        padding-top: 0.2ex;
+        padding-left: 0.5em;
+      }
+
+      &:focus,
+      &:hover {
+        text-decoration: underline;
+      }
+
+      a:hover {
+        text-decoration: underline;
+      }
     }
-    .specimen-bar {
+  }
+}
+#logo {
+  img {
+    height: 32px;
+  }
+}
+.specimen-bar {
+  display: none;
+}
+
+@media (min-width: $tablet-breakpoint) {
+  nav {
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: row;
+    height: var(--ns-desktop-navbar-height);
+    #navbar-main {
+      #navbar-toggler {
         display: none;
+      }
     }
 
-    @media (min-width: $tablet-breakpoint) {
-        nav {
-            justify-content: space-between;
-            align-items: center;
-            flex-direction: row;
-            height: var(--ns-desktop-navbar-height);
-            #navbar-main {
-                #navbar-toggler {
-                    display: none;
-                }
-            }
-
-            #navbar-links {
-                align-items: center;
-                display: flex;
-                flex-direction: row;
-                margin-top: 0;
-                border-bottom: none;
-                width: unset;
-                gap: 24px;
-                .nav-link {
-                    margin-top: 0;
-                }
-            }
-        }
-        .specimen-bar {
-            display: flex;
-        }
+    #navbar-links {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      margin-top: 0;
+      border-bottom: none;
+      width: unset;
+      gap: 24px;
+      .nav-link {
+        margin-top: 0;
+      }
     }
+  }
+  .specimen-bar {
+    display: flex;
+  }
+}
 </style>

From 69623fe3d4260e7b820c2f5719d504bf4b883570 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Wed, 4 Feb 2026 19:29:24 +0100
Subject: [PATCH 02/10] adjust logo height

---
 src/views/minor/NavBar.vue | 526 +++++++++++++++++++------------------
 1 file changed, 265 insertions(+), 261 deletions(-)

diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index 1d9e8a7f..957b033b 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -1,291 +1,295 @@
 <template>
-  <header>
-    <nav>
-      <div id="navbar-main">
-        <a href="/doc/doc/about/">
-          <img :src="LogoWithMicroscope" alt="A microscope icon." />
-        </a>
-        <button
-          id="navbar-toggler"
-          type="button"
-          aria-controls="navbarSupportedContent"
-          :aria-expanded="menuOpen"
-          aria-label="Toggle navigation."
-          @click="toggleMenu"
-        >
-          <span class="material-icons-sharp">menu</span>
-        </button>
-      </div>
-      <slot class="specimen-bar" />
-      <div class="burger-menu">
-        <div id="navbar-links" :class="{ open: menuOpen }">
-          <RouterLink class="nav-link" to="/gallery" @click="closeMenu">
-            Gallery
-          </RouterLink>
-          <div class="help-popper">
-            <a href="/doc/">Help</a>
-            <div id="help-popup" class="shadowed">
-              <div class="nav-link">
-                <a href="/doc/doc/user_guide/">User Guide</a>
-              </div>
-              <div class="leftdented">
-                <a class="nav-link" :href="vizLink()">
-                  {{ specimen.visualizerName() }}
-                  Visualizer </a
-                >┤
-              </div>
-              <div class="leftdented tweakup">
-                <a class="nav-link" :href="seqLink()">
-                  {{ seqWord() }} Sequence </a
-                >┘
-              </div>
-              <div class="nav-link">
-                <a href="/doc/">Full Documentation</a>
-              </div>
+    <header>
+        <nav>
+            <div id="navbar-main">
+                <a id="logo" href="/doc/doc/about/">
+                    <img :src="LogoWithMicroscope" alt="A microscope icon.">
+                </a>
+                <button
+                    id="navbar-toggler"
+                    type="button"
+                    aria-controls="navbarSupportedContent"
+                    :aria-expanded="menuOpen"
+                    aria-label="Toggle navigation."
+                    @click="toggleMenu">
+                    <span class="material-icons-sharp">menu</span>
+                </button>
             </div>
-          </div>
-        </div>
-        <div class="close material-icons-sharp">close</div>
-      </div>
-    </nav>
-  </header>
+            <slot class="specimen-bar" />
+            <div class="burger-menu">
+                <div id="navbar-links" :class="{open: menuOpen}">
+                    <RouterLink
+                        class="nav-link"
+                        to="/gallery"
+                        @click="closeMenu">
+                        Gallery
+                    </RouterLink>
+                    <div class="help-popper">
+                        <a href="/doc/">Help</a>
+                        <div id="help-popup" class="shadowed">
+                            <div class="nav-link">
+                                <a href="/doc/doc/user_guide/">User Guide</a>
+                            </div>
+                            <div class="leftdented">
+                                <a class="nav-link" :href="vizLink()">
+                                    {{ specimen.visualizerName() }}
+                                    Visualizer </a>┤
+                            </div>
+                            <div class="leftdented tweakup">
+                                <a class="nav-link" :href="seqLink()">
+                                    {{ seqWord() }} Sequence </a>┘
+                            </div>
+                            <div class="nav-link">
+                                <a href="/doc/">Full Documentation</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="close material-icons-sharp">close</div>
+            </div>
+        </nav>
+    </header>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import type { PropType, UnwrapNestedRefs } from "vue";
-import { RouterLink } from "vue-router";
-
-import LogoWithMicroscope from "@/assets/img/logo.svg";
-import type { Specimen } from "@/shared/Specimen";
-
-const props = defineProps({
-  specimen: {
-    type: Object as PropType<UnwrapNestedRefs<Specimen>>,
-    required: true,
-  },
-});
-
-const menuOpen = ref(false);
-
-function toggleMenu() {
-  menuOpen.value = !menuOpen.value;
-}
-
-function closeMenu() {
-  menuOpen.value = false;
-}
-
-function seqWord() {
-  return props.specimen.sequenceName().split(/[\s:]/, 2)[0] || "";
-}
-function seqLink() {
-  return `/doc/src/sequences/${seqWord()}/`;
-}
-function vizLink() {
-  return `/doc/src/visualizers/${props.specimen.visualizerKey}/`;
-}
-</script>
+    import {ref} from 'vue'
+    import type {PropType, UnwrapNestedRefs} from 'vue'
+    import {RouterLink} from 'vue-router'
 
-<style scoped lang="scss">
-nav {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 8px 16px 8px 16px;
-  border-bottom: 1px solid var(--ns-color-black);
-  position: relative;
-
-  #navbar-main {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    #navbar-toggler {
-      background: none;
-      border: none;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-
-  .close {
-    display: none;
-    font-size: 32px;
-    cursor: pointer;
-  }
-
-  .burger-menu {
-    background-color: var(--ns-color-white);
-    color: var(--ns-color-black);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-
-    &.open {
-      .material-icons-sharp {
-        display: block;
-      }
-    }
-  }
-
-  #navbar-links {
-    width: 100%;
-    display: none;
-    flex-direction: column;
-    color: var(--ns-color-black);
-    &.open {
-      display: flex;
-      z-index: 1000;
-    }
+    import LogoWithMicroscope from '@/assets/img/logo.svg'
+    import type {Specimen} from '@/shared/Specimen'
+
+    const props = defineProps({
+        specimen: {
+            type: Object as PropType<UnwrapNestedRefs<Specimen>>,
+            required: true,
+        },
+    })
+
+    const menuOpen = ref(false)
 
-    @media (max-width: $mobile-breakpoint) {
-      /* should not push content down */
-      background-color: var(--ns-color-white);
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 100%;
-      padding: 0.2em 0.5em;
+    function toggleMenu() {
+        menuOpen.value = !menuOpen.value
     }
 
-    @media (min-width: $mobile-breakpoint) {
-      display: flex;
+    function closeMenu() {
+        menuOpen.value = false
     }
 
-    @media (min-width: $tablet-breakpoint) {
-      margin-top: 8px;
+    function seqWord() {
+        return props.specimen.sequenceName().split(/[\s:]/, 2)[0] || ''
+    }
+    function seqLink() {
+        return `/doc/src/sequences/${seqWord()}/`
     }
+    function vizLink() {
+        return `/doc/src/visualizers/${props.specimen.visualizerKey}/`
+    }
+</script>
 
-    .help-popper {
-      cursor: pointer;
-      font-family: var(--ns-font-display);
-      font-size: var(--ns-size-display);
-      position: relative;
-      padding-right: 0.5em;
-
-      a {
-        font-family: var(--ns-font-display);
-        text-decoration: none;
-      }
-      a:hover {
-        text-decoration: underline;
-      }
-
-      #help-popup {
-        visibility: hidden;
+<style scoped lang="scss">
+    nav {
         display: flex;
         flex-direction: column;
-        align-items: flex-end;
-        align-content: flex-end;
-        white-space: nowrap;
-        position: absolute;
-        right: 0;
-        width: auto;
-        z-index: 10000;
-        background-color: var(--ns-color-white);
-        opacity: 1;
-        margin-top: 0.3ex;
-        padding-bottom: 0.5ex;
-        padding-top: 0.5ex;
-        border: 1px solid var(--ns-color-black);
-
-        .leftdented {
-          padding-right: 0.5em;
-        }
-
-        .tweakup {
-          position: relative;
-          bottom: 6px;
+        justify-content: center;
+        padding: 8px 16px 8px 16px;
+        border-bottom: 1px solid var(--ns-color-black);
+        position: relative;
+
+        #navbar-main {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            #navbar-toggler {
+                background: none;
+                border: none;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
         }
 
-        .nav-link {
-          color: var(--ns-color-black);
-          padding-top: 0ex;
-          padding-bottom: 0ex;
+        .close {
+            display: none;
+            font-size: 32px;
+            cursor: pointer;
         }
 
-        a {
-          font-family: var(--ns-font-main);
-          font-size: var(--ns-size-heading);
-          text-decoration: none;
-          padding-right: 0px;
+        .burger-menu {
+            background-color: var(--ns-color-white);
+            color: var(--ns-color-black);
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            &.open {
+                .material-icons-sharp {
+                    display: block;
+                }
+            }
         }
 
-        a:hover {
-          text-decoration: underline;
+        #navbar-links {
+            width: 100%;
+            display: none;
+            flex-direction: column;
+            color: var(--ns-color-black);
+            &.open {
+                display: flex;
+                z-index: 1000;
+            }
+
+            @media (max-width: $mobile-breakpoint) {
+                /* should not push content down */
+                background-color: var(--ns-color-white);
+                position: absolute;
+                top: 100%;
+                left: 0;
+                width: 100%;
+                padding: 0.2em 0.5em;
+            }
+
+            @media (min-width: $mobile-breakpoint) {
+                display: flex;
+            }
+
+            @media (min-width: $tablet-breakpoint) {
+                margin-top: 8px;
+            }
+
+            .help-popper {
+                cursor: pointer;
+                font-family: var(--ns-font-display);
+                font-size: var(--ns-size-display);
+                position: relative;
+                padding-right: 0.5em;
+
+                a {
+                    font-family: var(--ns-font-display);
+                    text-decoration: none;
+                }
+                a:hover {
+                    text-decoration: underline;
+                }
+
+                #help-popup {
+                    visibility: hidden;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-end;
+                    align-content: flex-end;
+                    white-space: nowrap;
+                    position: absolute;
+                    right: 0;
+                    width: auto;
+                    z-index: 10000;
+                    background-color: var(--ns-color-white);
+                    opacity: 1;
+                    margin-top: 0.3ex;
+                    padding-bottom: 0.5ex;
+                    padding-top: 0.5ex;
+                    border: 1px solid var(--ns-color-black);
+
+                    .leftdented {
+                        padding-right: 0.5em;
+                    }
+
+                    .tweakup {
+                        position: relative;
+                        bottom: 6px;
+                    }
+
+                    .nav-link {
+                        color: var(--ns-color-black);
+                        padding-top: 0ex;
+                        padding-bottom: 0ex;
+                    }
+
+                    a {
+                        font-family: var(--ns-font-main);
+                        font-size: var(--ns-size-heading);
+                        text-decoration: none;
+                        padding-right: 0px;
+                    }
+
+                    a:hover {
+                        text-decoration: underline;
+                    }
+                }
+
+                &:hover #help-popup {
+                    visibility: visible;
+                    opacity: 1;
+                }
+            }
+
+            .nav-link {
+                font-family: var(--ns-font-display);
+                font-size: var(--ns-size-display);
+                color: var(--ns-color-black);
+                padding-right: 0.5em;
+                padding-bottom: 0.2ex;
+                text-decoration: none;
+
+                @media (min-width: $tablet-breakpoint) {
+                    margin-top: 8px;
+                    padding-top: 0.2ex;
+                    padding-left: 0.5em;
+                }
+
+                &:focus,
+                &:hover {
+                    text-decoration: underline;
+                }
+
+                a:hover {
+                    text-decoration: underline;
+                }
+            }
         }
-      }
-
-      &:hover #help-popup {
-        visibility: visible;
-        opacity: 1;
-      }
     }
+    #logo {
+        img {
+            height: 24px;
 
-    .nav-link {
-      font-family: var(--ns-font-display);
-      font-size: var(--ns-size-display);
-      color: var(--ns-color-black);
-      padding-right: 0.5em;
-      padding-bottom: 0.2ex;
-      text-decoration: none;
-
-      @media (min-width: $tablet-breakpoint) {
-        margin-top: 8px;
-        padding-top: 0.2ex;
-        padding-left: 0.5em;
-      }
-
-      &:focus,
-      &:hover {
-        text-decoration: underline;
-      }
-
-      a:hover {
-        text-decoration: underline;
-      }
+            @media (min-width: $tablet-breakpoint) {
+                height: 32px;
+            }
+        }
     }
-  }
-}
-#logo {
-  img {
-    height: 32px;
-  }
-}
-.specimen-bar {
-  display: none;
-}
-
-@media (min-width: $tablet-breakpoint) {
-  nav {
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-    height: var(--ns-desktop-navbar-height);
-    #navbar-main {
-      #navbar-toggler {
+    .specimen-bar {
         display: none;
-      }
     }
 
-    #navbar-links {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      margin-top: 0;
-      border-bottom: none;
-      width: unset;
-      gap: 24px;
-      .nav-link {
-        margin-top: 0;
-      }
+    @media (min-width: $tablet-breakpoint) {
+        nav {
+            justify-content: space-between;
+            align-items: center;
+            flex-direction: row;
+            height: var(--ns-desktop-navbar-height);
+            #navbar-main {
+                #navbar-toggler {
+                    display: none;
+                }
+            }
+
+            #navbar-links {
+                align-items: center;
+                display: flex;
+                flex-direction: row;
+                margin-top: 0;
+                border-bottom: none;
+                width: unset;
+                gap: 24px;
+                .nav-link {
+                    margin-top: 0;
+                }
+            }
+        }
+        .specimen-bar {
+            display: flex;
+        }
     }
-  }
-  .specimen-bar {
-    display: flex;
-  }
-}
 </style>

From 9fafd46a34ec329d5bfda15e026b5f8185ebf8b6 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Wed, 4 Feb 2026 19:30:24 +0100
Subject: [PATCH 03/10] install phosphor

---
 package-lock.json | 19 +++++++++++++++++++
 package.json      |  1 +
 2 files changed, 20 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 22fbb4b6..2f9ee1c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
             "version": "0.4.0",
             "hasInstallScript": true,
             "dependencies": {
+                "@phosphor-icons/vue": "^2.2.1",
                 "axios": "^1.12.0",
                 "bigint-isqrt": "^0.3.2",
                 "bigint-mod-arith": "^3.3.1",
@@ -846,6 +847,18 @@
             "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
             "dev": true
         },
+        "node_modules/@phosphor-icons/vue": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.2.1.tgz",
+            "integrity": "sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2.39"
+            }
+        },
         "node_modules/@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -6443,6 +6456,12 @@
             "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==",
             "dev": true
         },
+        "@phosphor-icons/vue": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/@phosphor-icons/vue/-/vue-2.2.1.tgz",
+            "integrity": "sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==",
+            "requires": {}
+        },
         "@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
diff --git a/package.json b/package.json
index 4a4010d8..7187a67a 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
         "postinstall": "git config --local include.path ../.gitconfig && python3 -m venv .venv && cd tools && node pyrun.mjs python -m pip install -U pip && node pyrun.mjs pip install -r requirements.txt"
     },
     "dependencies": {
+        "@phosphor-icons/vue": "^2.2.1",
         "axios": "^1.12.0",
         "bigint-isqrt": "^0.3.2",
         "bigint-mod-arith": "^3.3.1",

From 1eec9c68d6a1decb047245d08f218622a2c10ef5 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 16:16:28 +0100
Subject: [PATCH 04/10] mobile styling

---
 src/App.vue                |   2 +
 src/views/Scope.vue        | 121 +++++++++++++++++++++++++++++++------
 src/views/minor/NavBar.vue |  59 +++++++++---------
 3 files changed, 133 insertions(+), 49 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2f8239a6..38dd9600 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -86,6 +86,8 @@
         --ns-font-weight-medium: 500;
 
         /* Dimensions */
+        /* TODO: compute this dynamically */
+        --ns-mobile-navbar-height: 45px;
         --ns-desktop-navbar-height: 76px;
         --ns-desktop-tab-width: 300px;
         --ns-specimen-card-width: 216px;
diff --git a/src/views/Scope.vue b/src/views/Scope.vue
index 7403f98f..5f9fd8d5 100644
--- a/src/views/Scope.vue
+++ b/src/views/Scope.vue
@@ -47,6 +47,40 @@ visualizers you can select.
             id="specimen-bar-desktop"
             :specimen
             @update-specimen-name="handleSpecimenUpdate" />
+        <div id="phone-opener-container">
+            <button
+                aria-controls="sequenceTab"
+                :aria-expanded="Boolean(sequenceTabOpen)"
+                class="phone-opener"
+                type="button"
+                @click="
+                    () => {
+                        sequenceTabOpen = !sequenceTabOpen
+                        visualizerTabOpen = false
+                    }
+                ">
+                <PhDna
+                    alt="Toggle specimen bar"
+                    :size="24"
+                    color="currentColor" />
+            </button>
+            <button
+                aria-controls="visualizerTab"
+                :aria-expanded="Boolean(visualizerTabOpen)"
+                class="phone-opener"
+                type="button"
+                @click="
+                    () => {
+                        visualizerTabOpen = !visualizerTabOpen
+                        sequenceTabOpen = false
+                    }
+                ">
+                <PhMicroscope
+                    alt="Toggle visualizer bar"
+                    :size="24"
+                    color="currentColor" />
+            </button>
+        </div>
     </NavBar>
     <div id="specimen-container">
         <SwitcherModal
@@ -70,10 +104,11 @@ visualizers you can select.
                     changeVisualizerOpen = false
                 }
             " />
-        <tab
+        <Tab
             id="sequenceTab"
             class="tab docked"
             docked="top-right"
+            :class="{visible: sequenceTabOpen}"
             :last-coords-x="Math.floor(tabWidth / 3)"
             :last-coords-y="Math.floor(tabWidth / 3)">
             <ParamEditor
@@ -87,10 +122,11 @@ visualizers you can select.
                         updateURL()
                     }
                 " />
-        </tab>
-        <tab
-            id="visualiserTab"
+        </Tab>
+        <Tab
+            id="visualizerTab"
             class="tab docked"
+            :class="{visible: visualizerTabOpen}"
             docked="bottom-right"
             last-dropzone="bottom-right"
             :last-coords-x="Math.floor((2 * tabWidth) / 3)"
@@ -105,7 +141,7 @@ visualizers you can select.
                         updateURL()
                     }
                 " />
-        </tab>
+        </Tab>
         <SpecimenBar
             id="specimen-bar-phone"
             class="specimen-bar"
@@ -162,6 +198,7 @@ visualizers you can select.
 </template>
 
 <script lang="ts">
+    import {PhDna, PhMicroscope} from '@phosphor-icons/vue'
     import NavBar from './minor/NavBar.vue'
     import SpecimenBar from '../components/SpecimenBar.vue'
     import {clearErrorOverlay} from '@/shared/alertMessage'
@@ -372,6 +409,9 @@ visualizers you can select.
     const changeSequenceOpen = ref(false)
     const changeVisualizerOpen = ref(false)
 
+    const sequenceTabOpen = ref(false)
+    const visualizerTabOpen = ref(false)
+
     const router = useRouter()
     const route = useRoute()
 
@@ -451,7 +491,9 @@ visualizers you can select.
     })
 
     onMounted(() => {
-        positionAndSizeAllTabs()
+        if (!isMobile) {
+            positionAndSizeAllTabs()
+        }
         canvasContainer = document.getElementById('canvas-container')!
 
         if (!initialLoad) throw new Error("showURL didn't promise Specimen")
@@ -619,6 +661,23 @@ visualizers you can select.
 
 <style scoped lang="scss">
     // mobile styles
+    #phone-opener-container {
+        align-items: center;
+        display: flex;
+        gap: 0.5em;
+        margin-right: 0.5em;
+    }
+
+    .phone-opener {
+        /* remove button styles */
+        background: none;
+        border-style: none;
+
+        /* center contents */
+        display: inline-flex;
+        align-items: center;
+    }
+
     .navbar {
         display: unset;
     }
@@ -636,6 +695,10 @@ visualizers you can select.
         min-height: fit-content;
         padding-left: auto;
         padding-right: auto;
+
+        @media (max-width: $mobile-breakpoint) {
+            flex: 1;
+        }
     }
     #canvas-container {
         flex: 1;
@@ -647,7 +710,6 @@ visualizers you can select.
         order: 1;
         z-index: -1;
         border-bottom: 1px solid var(--ns-color-black);
-        height: 300px;
         width: 100%;
     }
     .dropzone-container {
@@ -662,27 +724,44 @@ visualizers you can select.
         display: none;
     }
     #sequenceTab {
-        width: 100%;
-        padding-left: auto;
-        padding-right: auto;
         order: 3;
-        border-bottom: 1px solid var(--ns-color-black);
-        height: fit-content;
     }
-    #visualiserTab {
+    #visualizerTab {
         width: 100%;
         padding-left: auto;
         padding-right: auto;
         order: 4;
         border-bottom: 1px solid var(--ns-color-black);
-        height: fit-content;
     }
     #specimen-bar-phone {
         order: 2;
         padding-left: auto;
         padding-right: auto;
         border-bottom: 1px solid var(--ns-color-black);
+
+        display: none;
+
+        &.visible {
+            display: block;
+        }
+    }
+
+    @media (max-width: $mobile-breakpoint) {
+        .tab {
+            background: var(--ns-color-white);
+            bottom: 0;
+            height: 0;
+            overflow: hidden;
+            position: absolute;
+            transition: height 150ms ease-in-out;
+
+            &.visible {
+                height: calc(0.5 * (100vh - var(--ns-mobile-navbar-height)));
+                overflow: auto;
+            }
+        }
     }
+
     // tablet & desktop styles
     @media (min-width: $tablet-breakpoint) {
         #specimen-bar-desktop {
@@ -696,7 +775,8 @@ visualizers you can select.
             border: 0px;
         }
         #sequenceTab,
-        #visualiserTab {
+        #visualizerTab {
+            display: block;
             width: var(--ns-desktop-tab-width);
         }
         #specimen-container {
@@ -708,7 +788,6 @@ visualizers you can select.
         }
 
         #canvas-container {
-            height: unset;
             order: unset;
             flex: 1;
             position: relative;
@@ -773,8 +852,16 @@ visualizers you can select.
 
         .tab {
             width: 300px;
-            position: absolute;
             order: unset;
+            height: fit-content;
+
+            padding-left: auto;
+            padding-right: auto;
+            border-bottom: 1px solid var(--ns-color-black);
+        }
+
+        #phone-opener-container {
+            display: none;
         }
     }
 </style>
diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index 957b033b..555958d0 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -1,21 +1,20 @@
 <template>
     <header>
         <nav>
-            <div id="navbar-main">
-                <a id="logo" href="/doc/doc/about/">
-                    <img :src="LogoWithMicroscope" alt="A microscope icon.">
-                </a>
-                <button
-                    id="navbar-toggler"
-                    type="button"
-                    aria-controls="navbarSupportedContent"
-                    :aria-expanded="menuOpen"
-                    aria-label="Toggle navigation."
-                    @click="toggleMenu">
-                    <span class="material-icons-sharp">menu</span>
-                </button>
-            </div>
+            <a id="logo" href="/doc/doc/about/">
+                <img :src="LogoWithMicroscope" alt="A microscope icon.">
+            </a>
+
             <slot class="specimen-bar" />
+            <button
+                id="navbar-toggler"
+                type="button"
+                aria-controls="navbarSupportedContent"
+                :aria-expanded="menuOpen"
+                aria-label="Toggle navigation."
+                @click="toggleMenu">
+                <span class="material-icons-sharp">menu</span>
+            </button>
             <div class="burger-menu">
                 <div id="navbar-links" :class="{open: menuOpen}">
                     <RouterLink
@@ -90,24 +89,17 @@
 <style scoped lang="scss">
     nav {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
         padding: 8px 16px 8px 16px;
         border-bottom: 1px solid var(--ns-color-black);
         position: relative;
 
-        #navbar-main {
+        #navbar-toggler {
+            background: none;
+            border: none;
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-
-            #navbar-toggler {
-                background: none;
-                border: none;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
+            justify-content: center;
+            align-items: center;
         }
 
         .close {
@@ -251,11 +243,15 @@
         }
     }
     #logo {
+        @media (max-width: $mobile-breakpoint) {
+            margin-right: auto;
+        }
+
         img {
             height: 24px;
 
             @media (min-width: $tablet-breakpoint) {
-                height: 32px;
+                height: 35px;
             }
         }
     }
@@ -269,10 +265,9 @@
             align-items: center;
             flex-direction: row;
             height: var(--ns-desktop-navbar-height);
-            #navbar-main {
-                #navbar-toggler {
-                    display: none;
-                }
+
+            #navbar-toggler {
+                display: none;
             }
 
             #navbar-links {

From cc95ed3f0e804e69b9c55101dcef56899f32be28 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 16:41:40 +0100
Subject: [PATCH 05/10] fix typos

---
 src/views/Scope.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/Scope.vue b/src/views/Scope.vue
index 5f9fd8d5..3283b86a 100644
--- a/src/views/Scope.vue
+++ b/src/views/Scope.vue
@@ -60,7 +60,7 @@ visualizers you can select.
                     }
                 ">
                 <PhDna
-                    alt="Toggle specimen bar"
+                    alt="Toggle sequence tab"
                     :size="24"
                     color="currentColor" />
             </button>
@@ -76,7 +76,7 @@ visualizers you can select.
                     }
                 ">
                 <PhMicroscope
-                    alt="Toggle visualizer bar"
+                    alt="Toggle visualizer tab"
                     :size="24"
                     color="currentColor" />
             </button>
@@ -331,6 +331,7 @@ visualizers you can select.
      * Used when the window is resized.
      */
     export function positionAndSizeAllTabs(): void {
+    if (isMobile()) return;
         // First reset the "empty" classes and recompute them, just in case:
         document
             .querySelectorAll('.dropzone')
@@ -491,9 +492,7 @@ visualizers you can select.
     })
 
     onMounted(() => {
-        if (!isMobile) {
             positionAndSizeAllTabs()
-        }
         canvasContainer = document.getElementById('canvas-container')!
 
         if (!initialLoad) throw new Error("showURL didn't promise Specimen")
@@ -685,6 +684,7 @@ visualizers you can select.
         display: none;
     }
     #main {
+      flex: 1;
         display: flex;
         height: 100%;
     }
@@ -854,6 +854,7 @@ visualizers you can select.
             width: 300px;
             order: unset;
             height: fit-content;
+            position: absolute;
 
             padding-left: auto;
             padding-right: auto;

From 6ec294abec17e4b752ef4de44da8bcbf88c3a706 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 16:43:01 +0100
Subject: [PATCH 06/10] fix isMobile() function

---
 src/App.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 38dd9600..13bec8ce 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,7 @@
 </script>
 
 <!-- Global styles. This style tag is explicitly unscoped. -->
-<style>
+<style lang="scss">
     #container {
         display: flex;
         flex-direction: column;
@@ -108,8 +108,8 @@
         // Large devices (desktops)
         @media (min-width: $desktop-breakpoint) { ... }
         */
-        --ns-breakpoint-mobile: $mobile-breakpoint;
-        --ns-breakpoint-tablet: $tablet-breakpoint;
+        --ns-breakpoint-mobile: #{$mobile-breakpoint};
+        --ns-breakpoint-tablet: #{$tablet-breakpoint};
         /* Not actually used at the moment:
           --ns-breakpoint-desktop: 1200px;
          */

From 55d578ade9cf89e5c50cc7d2f11e16534254fc2f Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 16:45:51 +0100
Subject: [PATCH 07/10] fix tab width

---
 src/components/Tab.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Tab.vue b/src/components/Tab.vue
index fa69ab0b..055915af 100644
--- a/src/components/Tab.vue
+++ b/src/components/Tab.vue
@@ -309,8 +309,7 @@
         display: none;
     }
     .tab {
-        width: 300px;
-        height: fit-content;
+        width: 100%;
     }
     .content {
         padding: 0px 16px 16px 16px;

From 25607d44277ff815bb6966b8c30481ca5d17cbf2 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 16:58:13 +0100
Subject: [PATCH 08/10] restore specimen bar

---
 src/components/SpecimenBar.vue |  8 ++++++--
 src/views/Scope.vue            | 24 ++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/components/SpecimenBar.vue b/src/components/SpecimenBar.vue
index 76472815..0015da84 100644
--- a/src/components/SpecimenBar.vue
+++ b/src/components/SpecimenBar.vue
@@ -4,7 +4,7 @@
             <label>
                 Specimen name
                 <input
-                    id="spec-name"
+                    class="spec-name"
                     type="text"
                     :value="specimen.name"
                     @keyup.enter="blurName()"
@@ -117,7 +117,11 @@
     }
 
     function blurName() {
-        window.document.getElementById('spec-name')?.blur()
+        for (const input of window.document.getElementsByClassName(
+            'spec-name'
+        )) {
+            input.blur()
+        }
     }
 
     function refresh() {
diff --git a/src/views/Scope.vue b/src/views/Scope.vue
index 3283b86a..bb27efba 100644
--- a/src/views/Scope.vue
+++ b/src/views/Scope.vue
@@ -331,7 +331,7 @@ visualizers you can select.
      * Used when the window is resized.
      */
     export function positionAndSizeAllTabs(): void {
-    if (isMobile()) return;
+        if (isMobile()) return
         // First reset the "empty" classes and recompute them, just in case:
         document
             .querySelectorAll('.dropzone')
@@ -492,7 +492,7 @@ visualizers you can select.
     })
 
     onMounted(() => {
-            positionAndSizeAllTabs()
+        positionAndSizeAllTabs()
         canvasContainer = document.getElementById('canvas-container')!
 
         if (!initialLoad) throw new Error("showURL didn't promise Specimen")
@@ -684,7 +684,7 @@ visualizers you can select.
         display: none;
     }
     #main {
-      flex: 1;
+        flex: 1;
         display: flex;
         height: 100%;
     }
@@ -735,14 +735,17 @@ visualizers you can select.
     }
     #specimen-bar-phone {
         order: 2;
-        padding-left: auto;
-        padding-right: auto;
+        padding: 8px;
         border-bottom: 1px solid var(--ns-color-black);
-
-        display: none;
-
-        &.visible {
-            display: block;
+        position: fixed;
+        bottom: 0;
+        z-index: 1;
+        left: 0;
+        background: var(--ns-color-white);
+
+        /* align with label */
+        :deep(.spec-name) {
+            padding-left: 0;
         }
     }
 
@@ -754,6 +757,7 @@ visualizers you can select.
             overflow: hidden;
             position: absolute;
             transition: height 150ms ease-in-out;
+            z-index: 2;
 
             &.visible {
                 height: calc(0.5 * (100vh - var(--ns-mobile-navbar-height)));

From 668e31a5656efc270146246270072fff86e8cd4c Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 21:01:35 +0100
Subject: [PATCH 09/10] fix typescript

---
 src/components/SpecimenBar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SpecimenBar.vue b/src/components/SpecimenBar.vue
index 0015da84..6e77e445 100644
--- a/src/components/SpecimenBar.vue
+++ b/src/components/SpecimenBar.vue
@@ -117,9 +117,9 @@
     }
 
     function blurName() {
-        for (const input of window.document.getElementsByClassName(
-            'spec-name'
-        )) {
+        for (const input of Array.from(
+            document.getElementsByClassName('spec-name')
+        ) as HTMLInputElement[]) {
             input.blur()
         }
     }

From ff74832513e283d79d0b9fe08022acaf6760d869 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Thu, 5 Feb 2026 21:02:42 +0100
Subject: [PATCH 10/10] regenerate snapshots

---
 .github/workflows/ci.yaml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index e79c6bc5..58fede86 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -49,9 +49,9 @@ jobs:
             - name: End-to-end test
               run: npx playwright test -c e2e/playci.config.ts
 ### Uncomment when you need to re-extract snapshots
-#            - name: Extract snapshots
-#              if: always()
-#              uses: actions/upload-artifact@v4
-#              with:
-#                  name: ci_actual_snapshots
-#                  path: e2e/results/manual/output
+            - name: Extract snapshots
+              if: always()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: ci_actual_snapshots
+                  path: e2e/results/manual/output