From 177f7b6e96501631b9363aae8c3622a60db1a052 Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Mon, 31 Aug 2026 00:00:26 -0500
Subject: [PATCH] Hang the 7-segment decimal off the preceding digit.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/SegmentDigits.vue | 55 +++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/components/SegmentDigits.vue b/components/SegmentDigits.vue
index c9a86cd..1a52229 100644
--- a/components/SegmentDigits.vue
+++ b/components/SegmentDigits.vue
@@ -1,17 +1,20 @@
 <template>
-  <div class="segment-readout flex h-11 items-center justify-center gap-px px-1.5" aria-hidden="true">
-    <template v-for="(ch, i) in chars" :key="i">
-      <span v-if="ch === '.'" class="dot on" />
-      <span v-else class="digit" :data-n="ch">
-        <i class="seg a" :class="{ on: lit(ch, 'a') }" />
-        <i class="seg b" :class="{ on: lit(ch, 'b') }" />
-        <i class="seg c" :class="{ on: lit(ch, 'c') }" />
-        <i class="seg d" :class="{ on: lit(ch, 'd') }" />
-        <i class="seg e" :class="{ on: lit(ch, 'e') }" />
-        <i class="seg f" :class="{ on: lit(ch, 'f') }" />
-        <i class="seg g" :class="{ on: lit(ch, 'g') }" />
-      </span>
-    </template>
+  <div class="segment-readout flex h-11 items-end justify-center gap-[3px] px-1.5 pb-2.5" aria-hidden="true">
+    <span
+      v-for="(item, i) in glyphs"
+      :key="i"
+      class="digit"
+      :data-n="item.ch"
+    >
+      <i class="seg a" :class="{ on: lit(item.ch, 'a') }" />
+      <i class="seg b" :class="{ on: lit(item.ch, 'b') }" />
+      <i class="seg c" :class="{ on: lit(item.ch, 'c') }" />
+      <i class="seg d" :class="{ on: lit(item.ch, 'd') }" />
+      <i class="seg e" :class="{ on: lit(item.ch, 'e') }" />
+      <i class="seg f" :class="{ on: lit(item.ch, 'f') }" />
+      <i class="seg g" :class="{ on: lit(item.ch, 'g') }" />
+      <i v-if="item.dp" class="dp on" />
+    </span>
   </div>
 </template>
 
@@ -34,9 +37,18 @@ const props = defineProps<{
   value: string
 }>()
 
-const chars = computed(() => {
+const glyphs = computed(() => {
   const raw = String(props.value || '0')
-  return raw.split('').filter(ch => ch === '.' || MAP[ch])
+  const out: { ch: string; dp: boolean }[] = []
+  for (const ch of raw) {
+    if (ch === '.') {
+      if (out.length) out[out.length - 1].dp = true
+      else out.push({ ch: '0', dp: true })
+      continue
+    }
+    if (MAP[ch]) out.push({ ch, dp: false })
+  }
+  return out.length ? out : [{ ch: '0', dp: false }]
 })
 
 function lit(ch: string, seg: string) {
@@ -56,6 +68,10 @@ function lit(ch: string, seg: string) {
   position: relative;
   width: 0.72rem;
   height: 1.15rem;
+  margin-right: 0.2rem;
+}
+.digit:last-child {
+  margin-right: 0;
 }
 .seg {
   position: absolute;
@@ -73,15 +89,16 @@ function lit(ch: string, seg: string) {
 .b { top: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
 .e { bottom: 2px; left: 0; width: 2px; height: calc(50% - 3px); }
 .c { bottom: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
-.dot {
+.dp {
+  position: absolute;
+  right: -5px;
+  bottom: 0;
   width: 3px;
   height: 3px;
-  margin: 0 1px 1px;
-  align-self: flex-end;
   border-radius: 1px;
   background: rgba(251, 191, 36, 0.1);
 }
-.dot.on {
+.dp.on {
   background: #fbbf24;
   box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
 }