From ec86691f18313af5ad24d767c922839b15dcef88 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Mon, 2 Feb 2026 12:01:15 +0100
Subject: [PATCH 1/5] use SVG for boxing

---
 src/components/BoxCorner.vue | 37 +++++++++++++++++++++++++++
 src/components/BoxJoin.vue   | 48 ++++++++++++++++++++++++++++++++++++
 src/views/minor/NavBar.vue   | 27 +++++++++++++++-----
 3 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 src/components/BoxCorner.vue
 create mode 100644 src/components/BoxJoin.vue

diff --git a/src/components/BoxCorner.vue b/src/components/BoxCorner.vue
new file mode 100644
index 00000000..f91888f0
--- /dev/null
+++ b/src/components/BoxCorner.vue
@@ -0,0 +1,37 @@
+<template>
+  <svg
+    class="boxing box-corner"
+    fill="none"
+    :viewBox="`0 0 ${width} ${height}`"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      :d="`M 0 ${height / 2} h ${width / 2} v ${-height / 2}`"
+      stroke="currentColor"
+      :stroke-width="strokeWidth"
+    />
+  </svg>
+</template>
+
+<script setup>
+defineProps({
+  height: {
+    default: 32,
+    type: Number,
+  },
+  strokeWidth: {
+    default: 2,
+    type: Number,
+  },
+  width: {
+    default: 32,
+    type: Number,
+  },
+});
+</script>
+
+<style scoped>
+svg {
+  vertical-align: middle;
+}
+</style>
diff --git a/src/components/BoxJoin.vue b/src/components/BoxJoin.vue
new file mode 100644
index 00000000..f57fda36
--- /dev/null
+++ b/src/components/BoxJoin.vue
@@ -0,0 +1,48 @@
+<template>
+  <svg
+    class="boxing box-join"
+    fill="none"
+    :viewBox="`0 0 ${width} ${height}`"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <line
+      x1="0"
+      :x2="width / 2"
+      :y1="height / 2"
+      :y2="height / 2"
+      stroke="currentColor"
+      :stroke-width="strokeWidth"
+    />
+    <line
+      :x1="width / 2"
+      :x2="width / 2"
+      y1="0"
+      :y2="height"
+      stroke="currentColor"
+      :stroke-width="strokeWidth"
+    />
+  </svg>
+</template>
+
+<script setup>
+defineProps({
+  height: {
+    default: 32,
+    type: Number,
+  },
+  strokeWidth: {
+    default: 2,
+    type: Number,
+  },
+  width: {
+    default: 32,
+    type: Number,
+  },
+});
+</script>
+
+<style scoped>
+svg {
+  vertical-align: middle;
+}
+</style>
diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index f942315e..483cebf7 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -33,11 +33,13 @@
                             <div class="leftdented">
                                 <a class="nav-link" :href="vizLink()">
                                     {{ specimen.visualizerName() }}
-                                    Visualizer </a>┤
+                                    Visualizer </a>
+                                <BoxJoin height="28" width="24" />
                             </div>
                             <div class="leftdented tweakup">
                                 <a class="nav-link" :href="seqLink()">
-                                    {{ seqWord() }} Sequence </a>┘
+                                    {{ seqWord() }} Sequence </a>
+                                <BoxCorner height="28" width="24" />
                             </div>
                             <div class="nav-link">
                                 <a href="/doc/">Full Documentation</a>
@@ -58,6 +60,8 @@
 
     import LogoWithMicroscope from '@/assets/img/logo.svg'
     import type {Specimen} from '@/shared/Specimen'
+    import BoxJoin from '@/components/BoxJoin.vue'
+    import BoxCorner from '@/components/BoxCorner.vue'
 
     const props = defineProps({
         specimen: {
@@ -177,18 +181,29 @@
                     border: 1px solid var(--ns-color-black);
 
                     .leftdented {
-                        padding-right: 0.5em;
+                      display: flex;
+                      align-items: center;
                     }
 
-                    .tweakup {
-                        position: relative;
-                        bottom: 6px;
+                    .boxing {
+                      --width: 24px;
+
+                      margin-left: .5ex;
+                      margin-right: calc(.5em - var(--width) / 2 + 2px);
+                      width: var(--width);
+
+                      /* looks better visually */
+                      margin-bottom: -1.5px;
                     }
 
                     .nav-link {
                         color: var(--ns-color-black);
                         padding-top: 0ex;
                         padding-bottom: 0ex;
+                        margin: 0;
+
+                        /* for aligning with the boxing */
+                        line-height: 1;
                     }
 
                     a {

From 9d6c6fd47732d51bfe3ed12aefbb1e70a52b2b5c Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Mon, 2 Feb 2026 19:11:40 +0100
Subject: [PATCH 2/5] lint

---
 src/components/BoxCorner.vue | 56 +++++++++++++-------------
 src/components/BoxJoin.vue   | 77 +++++++++++++++++-------------------
 src/views/minor/NavBar.vue   | 22 ++++++-----
 3 files changed, 76 insertions(+), 79 deletions(-)

diff --git a/src/components/BoxCorner.vue b/src/components/BoxCorner.vue
index f91888f0..128024a3 100644
--- a/src/components/BoxCorner.vue
+++ b/src/components/BoxCorner.vue
@@ -1,37 +1,35 @@
 <template>
-  <svg
-    class="boxing box-corner"
-    fill="none"
-    :viewBox="`0 0 ${width} ${height}`"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      :d="`M 0 ${height / 2} h ${width / 2} v ${-height / 2}`"
-      stroke="currentColor"
-      :stroke-width="strokeWidth"
-    />
-  </svg>
+    <svg
+        class="boxing box-corner"
+        fill="none"
+        :viewBox="`0 0 ${width} ${height}`"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            :d="`M 0 ${height / 2} h ${width / 2} v ${-height / 2}`"
+            stroke="currentColor"
+            :stroke-width="strokeWidth" />
+    </svg>
 </template>
 
 <script setup>
-defineProps({
-  height: {
-    default: 32,
-    type: Number,
-  },
-  strokeWidth: {
-    default: 2,
-    type: Number,
-  },
-  width: {
-    default: 32,
-    type: Number,
-  },
-});
+    defineProps({
+        height: {
+            default: 32,
+            type: Number,
+        },
+        strokeWidth: {
+            default: 2,
+            type: Number,
+        },
+        width: {
+            default: 32,
+            type: Number,
+        },
+    })
 </script>
 
 <style scoped>
-svg {
-  vertical-align: middle;
-}
+    svg {
+        vertical-align: middle;
+    }
 </style>
diff --git a/src/components/BoxJoin.vue b/src/components/BoxJoin.vue
index f57fda36..514dda6a 100644
--- a/src/components/BoxJoin.vue
+++ b/src/components/BoxJoin.vue
@@ -1,48 +1,45 @@
 <template>
-  <svg
-    class="boxing box-join"
-    fill="none"
-    :viewBox="`0 0 ${width} ${height}`"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <line
-      x1="0"
-      :x2="width / 2"
-      :y1="height / 2"
-      :y2="height / 2"
-      stroke="currentColor"
-      :stroke-width="strokeWidth"
-    />
-    <line
-      :x1="width / 2"
-      :x2="width / 2"
-      y1="0"
-      :y2="height"
-      stroke="currentColor"
-      :stroke-width="strokeWidth"
-    />
-  </svg>
+    <svg
+        class="boxing box-join"
+        fill="none"
+        :viewBox="`0 0 ${width} ${height}`"
+        xmlns="http://www.w3.org/2000/svg">
+        <line
+            x1="0"
+            :x2="width / 2"
+            :y1="height / 2"
+            :y2="height / 2"
+            stroke="currentColor"
+            :stroke-width="strokeWidth" />
+        <line
+            :x1="width / 2"
+            :x2="width / 2"
+            y1="0"
+            :y2="height"
+            stroke="currentColor"
+            :stroke-width="strokeWidth" />
+    </svg>
 </template>
 
 <script setup>
-defineProps({
-  height: {
-    default: 32,
-    type: Number,
-  },
-  strokeWidth: {
-    default: 2,
-    type: Number,
-  },
-  width: {
-    default: 32,
-    type: Number,
-  },
-});
+    defineProps({
+        height: {
+            default: 32,
+            type: Number,
+        },
+        strokeWidth: {
+            default: 2,
+            type: Number,
+        },
+        width: {
+            default: 32,
+            type: Number,
+        },
+    })
 </script>
 
 <style scoped>
-svg {
-  vertical-align: middle;
-}
+    svg {
+        vertical-align: middle;
+    }
 </style>
diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index ed61b2a5..f5b45905 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -33,12 +33,14 @@
                             <div class="leftdented">
                                 <a class="nav-link" :href="vizLink()">
                                     {{ specimen.visualizerName() }}
-                                    Visualizer </a>
+                                    Visualizer
+                                </a>
                                 <BoxJoin height="28" width="24" />
                             </div>
                             <div class="leftdented tweakup">
                                 <a class="nav-link" :href="seqLink()">
-                                    {{ seqWord() }} Sequence </a>
+                                    {{ seqWord() }} Sequence
+                                </a>
                                 <BoxCorner height="28" width="24" />
                             </div>
                             <div class="nav-link">
@@ -181,19 +183,19 @@
                     border: 1px solid var(--ns-color-black);
 
                     .leftdented {
-                      display: flex;
-                      align-items: center;
+                        display: flex;
+                        align-items: center;
                     }
 
                     .boxing {
-                      --width: 24px;
+                        --width: 24px;
 
-                      margin-left: .5ex;
-                      margin-right: calc(.5em - var(--width) / 2 + 2px);
-                      width: var(--width);
+                        margin-left: 0.5ex;
+                        margin-right: calc(0.5em - var(--width) / 2 + 2px);
+                        width: var(--width);
 
-                      /* looks better visually */
-                      margin-bottom: -1.5px;
+                        /* looks better visually */
+                        margin-bottom: -1.5px;
                     }
 
                     .nav-link {

From e54018372009ee193cd9914a34e4bd7fa728612e Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Mon, 2 Feb 2026 19:14:11 +0100
Subject: [PATCH 3/5] lint + fix test

---
 src/components/BoxCorner.vue | 2 +-
 src/components/BoxJoin.vue   | 2 +-
 src/views/minor/NavBar.vue   | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BoxCorner.vue b/src/components/BoxCorner.vue
index 128024a3..0ec5dec9 100644
--- a/src/components/BoxCorner.vue
+++ b/src/components/BoxCorner.vue
@@ -11,7 +11,7 @@
     </svg>
 </template>
 
-<script setup>
+<script lang="ts" setup>
     defineProps({
         height: {
             default: 32,
diff --git a/src/components/BoxJoin.vue b/src/components/BoxJoin.vue
index 514dda6a..0d535504 100644
--- a/src/components/BoxJoin.vue
+++ b/src/components/BoxJoin.vue
@@ -21,7 +21,7 @@
     </svg>
 </template>
 
-<script setup>
+<script lang="ts" setup>
     defineProps({
         height: {
             default: 32,
diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index f5b45905..942e09b3 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -35,13 +35,13 @@
                                     {{ specimen.visualizerName() }}
                                     Visualizer
                                 </a>
-                                <BoxJoin height="28" width="24" />
+                                <BoxJoin :height="28" :width="24" />
                             </div>
                             <div class="leftdented tweakup">
                                 <a class="nav-link" :href="seqLink()">
                                     {{ seqWord() }} Sequence
                                 </a>
-                                <BoxCorner height="28" width="24" />
+                                <BoxCorner :height="28" :width="24" />
                             </div>
                             <div class="nav-link">
                                 <a href="/doc/">Full Documentation</a>

From 02540d9c8b949bfb17bb0dfe7881d2ef29a61ede Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Mon, 2 Feb 2026 20:21:06 +0100
Subject: [PATCH 4/5] use current values as defaults

---
 src/components/BoxJoin.vue | 4 ++--
 src/views/minor/NavBar.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BoxJoin.vue b/src/components/BoxJoin.vue
index 0d535504..0333768f 100644
--- a/src/components/BoxJoin.vue
+++ b/src/components/BoxJoin.vue
@@ -24,7 +24,7 @@
 <script lang="ts" setup>
     defineProps({
         height: {
-            default: 32,
+            default: 28,
             type: Number,
         },
         strokeWidth: {
@@ -32,7 +32,7 @@
             type: Number,
         },
         width: {
-            default: 32,
+            default: 24,
             type: Number,
         },
     })
diff --git a/src/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index 942e09b3..c6a34c07 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -35,13 +35,13 @@
                                     {{ specimen.visualizerName() }}
                                     Visualizer
                                 </a>
-                                <BoxJoin :height="28" :width="24" />
+                                <BoxJoin />
                             </div>
                             <div class="leftdented tweakup">
                                 <a class="nav-link" :href="seqLink()">
                                     {{ seqWord() }} Sequence
                                 </a>
-                                <BoxCorner :height="28" :width="24" />
+                                <BoxCorner />
                             </div>
                             <div class="nav-link">
                                 <a href="/doc/">Full Documentation</a>

From 1da8f7786baaeea39f2fa8de6c60f2fa942969d1 Mon Sep 17 00:00:00 2001
From: Yuri Sulyma <yuri@liqvidjs.org>
Date: Mon, 2 Feb 2026 23:40:08 +0100
Subject: [PATCH 5/5] fix default on the other one

---
 src/components/BoxCorner.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/BoxCorner.vue b/src/components/BoxCorner.vue
index 0ec5dec9..82bd6d46 100644
--- a/src/components/BoxCorner.vue
+++ b/src/components/BoxCorner.vue
@@ -14,7 +14,7 @@
 <script lang="ts" setup>
     defineProps({
         height: {
-            default: 32,
+            default: 28,
             type: Number,
         },
         strokeWidth: {
@@ -22,7 +22,7 @@
             type: Number,
         },
         width: {
-            default: 32,
+            default: 24,
             type: Number,
         },
     })