From cd1e74fb015b7f0c7f8fd96ec28083d1a5e57c86 Mon Sep 17 00:00:00 2001
From: EmNudge <24513691+EmNudge@users.noreply.github.com>
Date: Mon, 27 Apr 2026 23:44:19 -0400
Subject: [PATCH] Replace side panel tables with cards, chips, and code blocks

---
 dist/index.html                               |   4 +-
 .../table-container/InfoContainer.vue         |  37 ++---
 .../info-tables/CaseMapping.vue               |  63 ++++++---
 .../table-container/info-tables/Encoding.vue  | 130 ++++++++++--------
 .../info-tables/HtmlEntities.vue              |  73 +++++-----
 .../info-tables/NumberEquiv.vue               |  64 ++++++---
 6 files changed, 226 insertions(+), 145 deletions(-)
diff --git a/dist/index.html b/dist/index.html
index 14ad5b7..0babd64 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="manifest" href="/manifest.json" />
     <title>Unicode Lookup</title>
-    <script type="module" crossorigin src="/assets/main-tcDuWeFF.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/main-sNLOj4AU.css">
+    <script type="module" crossorigin src="/assets/main-DvE1h2G5.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/main-BVfXQ1zk.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/components/table-container/InfoContainer.vue b/src/components/table-container/InfoContainer.vue
index 0160409..6c9753c 100644
--- a/src/components/table-container/InfoContainer.vue
+++ b/src/components/table-container/InfoContainer.vue
@@ -74,14 +74,12 @@ const htmlEntityNames = computed(() => symbolHtmlNamesMap.value.get(props.codepo
         <span>{{ String.fromCodePoint(props.codepoint) }}</span>
       </div>
     </header>
-    <table class="basic-info">
-      <tbody>
-        <tr v-for="[name, value] in baseInfo" :key="name">
-          <td>{{ name }}</td>
-          <td>{{ value }}</td>
-        </tr>
-      </tbody>
-    </table>
+    <dl class="basic-info">
+      <div v-for="[name, value] in baseInfo" :key="name" class="info-item">
+        <dt>{{ name }}</dt>
+        <dd>{{ value }}</dd>
+      </div>
+    </dl>
 
     <HtmlEntities :codepoint="props.codepoint" :names="htmlEntityNames" />
     <CaseMapping
@@ -107,22 +105,29 @@ div.container {
 }
 .basic-info {
   display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2);
   font-size: var(--font-size-sm);
 }
-td {
+.info-item {
+  background: var(--color-bg-offset);
+  border-radius: var(--radius-lg);
   padding: var(--space-2) var(--space-3);
+  border: 1px solid rgba(128, 128, 128, 0.1);
+}
+.info-item:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
 }
-td:nth-child(1) {
+dt {
+  font-size: var(--font-size-xs);
   font-weight: 500;
   color: var(--color-text-secondary);
-  white-space: nowrap;
+  margin-bottom: var(--space-1);
 }
-td:nth-child(2) {
+dd {
   color: var(--color-text);
-}
-tr:nth-child(odd) {
-  background-color: var(--color-bg-offset);
-  border-radius: var(--radius-sm);
+  margin: 0;
+  word-break: break-word;
 }
 h1 {
   text-align: center;
diff --git a/src/components/table-container/info-tables/CaseMapping.vue b/src/components/table-container/info-tables/CaseMapping.vue
index 0bc56fd..21f54bf 100644
--- a/src/components/table-container/info-tables/CaseMapping.vue
+++ b/src/components/table-container/info-tables/CaseMapping.vue
@@ -21,20 +21,51 @@ const caseMappings = computed(
 </script>
 
 <template>
-  <template v-if="caseMappings.length">
-    <br />
-    <table>
-      <thead>
-        <tr>
-          <th class="title" colspan="2">Case Mapping</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="[key, value] in caseMappings" :key="key">
-          <td>{{ key }}</td>
-          <td>{{ String.fromCodePoint(value) }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </template>
+  <div v-if="caseMappings.length" class="case-section">
+    <h3>Case Mapping</h3>
+    <div class="case-cards">
+      <div v-for="[key, value] in caseMappings" :key="key" class="case-card">
+        <span class="case-char">{{ String.fromCodePoint(value) }}</span>
+        <span class="case-label">{{ key }}</span>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.case-section {
+  margin-top: var(--space-4);
+}
+h3 {
+  padding-bottom: var(--space-3);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+.case-cards {
+  display: flex;
+  gap: var(--space-2);
+}
+.case-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  background: var(--color-bg-offset);
+  border: 1px solid rgba(128, 128, 128, 0.1);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-5);
+  min-width: 72px;
+}
+.case-char {
+  font-size: var(--font-size-2xl);
+  color: var(--color-text);
+  line-height: 1;
+}
+.case-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+</style>
diff --git a/src/components/table-container/info-tables/Encoding.vue b/src/components/table-container/info-tables/Encoding.vue
index 2e1cd1b..624e972 100644
--- a/src/components/table-container/info-tables/Encoding.vue
+++ b/src/components/table-container/info-tables/Encoding.vue
@@ -39,76 +39,60 @@ function setEncoding(encoding: EncodingType) {
 </script>
 
 <template>
-  <div>
-    <br />
-    <table class="encoding-table">
-      <thead>
-        <tr>
-          <th class="title">Encoding</th>
-          <th>
-            <div class="encoding-type">
-              <button
-                v-for="encoding in encodingTypes"
-                :key="encoding"
-                :class="{ active: encodingMode === encoding }"
-                @click="setEncoding(encoding)"
-              >
-                {{ encoding }}
-              </button>
-            </div>
-          </th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr v-for="[name, bitSets, length] in encodingsTable" :key="name">
-          <td>{{ name }}</td>
-          <td class="bit-sets">
-            <span
-              v-for="(bitSet, i) in Array.from(bitSets)"
-              :key="i"
-              v-html="getNumber(bitSet, encodingMode, length as number)"
-            />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="encoding-section">
+    <div class="encoding-header">
+      <h3>Encoding</h3>
+      <div class="encoding-toggle">
+        <button
+          v-for="encoding in encodingTypes"
+          :key="encoding"
+          :class="{ active: encodingMode === encoding }"
+          @click="setEncoding(encoding)"
+        >
+          {{ encoding }}
+        </button>
+      </div>
+    </div>
+    <div class="encoding-block">
+      <div v-for="[name, bitSets, length] in encodingsTable" :key="name" class="encoding-line">
+        <span class="encoding-label">{{ name }}</span>
+        <span class="encoding-values">
+          <span
+            v-for="(bitSet, i) in Array.from(bitSets)"
+            :key="i"
+            v-html="getNumber(bitSet, encodingMode, length as number)"
+          />
+        </span>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.bit-sets span {
-  padding: 0 3px;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-sm);
+.encoding-section {
+  margin-top: var(--space-4);
 }
-.title {
-  color: var(--color-text-secondary);
-  font-weight: 500;
-}
-td {
-  padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
-}
-td:first-child {
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  white-space: nowrap;
+.encoding-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
 }
-th:first-child {
+h3 {
   color: var(--color-text-primary);
-  font-weight: 400;
   font-size: var(--font-size-sm);
-  padding-right: var(--space-4);
-}
-tbody tr:nth-child(odd) {
-  background-color: var(--color-bg-offset);
+  font-weight: 400;
+  letter-spacing: 0.01em;
 }
-.encoding-type {
+.encoding-toggle {
   display: flex;
   gap: 2px;
+  background: var(--color-bg-offset);
+  border-radius: var(--radius-md);
+  padding: 2px;
+  border: 1px solid rgba(128, 128, 128, 0.1);
 }
-.encoding-type button {
+.encoding-toggle button {
   opacity: 0.5;
   cursor: pointer;
   padding: var(--space-1) var(--space-2);
@@ -117,16 +101,40 @@ tbody tr:nth-child(odd) {
   margin: 0;
   font-weight: 500;
   font-size: var(--font-size-xs);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   transition:
     opacity var(--duration-fast),
     background var(--duration-fast);
 }
-.encoding-type button:hover {
+.encoding-toggle button:hover {
   opacity: 0.8;
 }
-.encoding-type .active {
+.encoding-toggle .active {
   opacity: 1;
   background-color: var(--color-bg-active);
 }
+.encoding-block {
+  background: var(--color-bg-offset);
+  border: 1px solid rgba(128, 128, 128, 0.1);
+  border-radius: var(--radius-lg);
+  padding: var(--space-2) 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}
+.encoding-line {
+  display: flex;
+  padding: var(--space-1) var(--space-3);
+  gap: var(--space-3);
+}
+.encoding-label {
+  color: var(--color-text-secondary);
+  min-width: 5.5em;
+  flex-shrink: 0;
+}
+.encoding-values {
+  color: var(--color-text);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 var(--space-1);
+}
 </style>
diff --git a/src/components/table-container/info-tables/HtmlEntities.vue b/src/components/table-container/info-tables/HtmlEntities.vue
index 3970b75..2afbf25 100644
--- a/src/components/table-container/info-tables/HtmlEntities.vue
+++ b/src/components/table-container/info-tables/HtmlEntities.vue
@@ -8,53 +8,58 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <div>
-    <br />
-    <table>
-      <thead>
-        <tr>
-          <th class="title" colspan="2">Html Entities</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="name in props.names" :key="name">
-          <td>Named</td>
-          <td>&amp;{{ name }};</td>
-        </tr>
-        <tr>
-          <td>Hex</td>
-          <td>&amp;#x{{ props.codepoint.toString(16).padStart(5, "0") }};</td>
-        </tr>
-        <tr>
-          <td>Dec</td>
-          <td>&amp;#{{ props.codepoint }};</td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="html-entities-section">
+    <h3>HTML Entities</h3>
+    <div class="chips">
+      <span v-for="name in props.names" :key="name" class="chip">
+        <span class="chip-label">Named</span>
+        <code>&amp;{{ name }};</code>
+      </span>
+      <span class="chip">
+        <span class="chip-label">Hex</span>
+        <code>&amp;#x{{ props.codepoint.toString(16).padStart(5, "0") }};</code>
+      </span>
+      <span class="chip">
+        <span class="chip-label">Dec</span>
+        <code>&amp;#{{ props.codepoint }};</code>
+      </span>
+    </div>
   </div>
 </template>
 
 <style scoped>
-th {
-  text-align: left;
+.html-entities-section {
+  margin-top: var(--space-4);
+}
+h3 {
+  padding-bottom: var(--space-3);
   color: var(--color-text-primary);
-  font-weight: 400;
   font-size: var(--font-size-sm);
-  padding-bottom: var(--space-2);
+  font-weight: 400;
+  letter-spacing: 0.01em;
 }
-tbody tr:nth-child(odd) {
-  background-color: var(--color-bg-offset);
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
 }
-td {
+.chip {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  background: var(--color-bg-offset);
+  border: 1px solid rgba(128, 128, 128, 0.1);
+  border-radius: var(--radius-lg);
   padding: var(--space-2) var(--space-3);
-  font-size: var(--font-size-sm);
 }
-td:first-child {
-  padding-right: var(--space-8);
+.chip-label {
+  font-size: var(--font-size-xs);
   color: var(--color-text-secondary);
   font-weight: 500;
 }
-td:nth-child(2) {
+.chip code {
   font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
 }
 </style>
diff --git a/src/components/table-container/info-tables/NumberEquiv.vue b/src/components/table-container/info-tables/NumberEquiv.vue
index 24a7b04..34d14a2 100644
--- a/src/components/table-container/info-tables/NumberEquiv.vue
+++ b/src/components/table-container/info-tables/NumberEquiv.vue
@@ -20,20 +20,52 @@ const numberMappings = computed(() =>
 </script>
 
 <template>
-  <template v-if="numberMappings.length">
-    <br />
-    <table>
-      <thead>
-        <tr>
-          <th class="title" colspan="2">Number Equivalent</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="[key, value] in numberMappings" :key="key">
-          <td>{{ key }}</td>
-          <td>{{ value }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </template>
+  <div v-if="numberMappings.length" class="number-section">
+    <h3>Number Equivalent</h3>
+    <div class="number-cards">
+      <div v-for="[key, value] in numberMappings" :key="key" class="number-card">
+        <span class="number-value">{{ value }}</span>
+        <span class="number-label">{{ key }}</span>
+      </div>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.number-section {
+  margin-top: var(--space-4);
+}
+h3 {
+  padding-bottom: var(--space-3);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+.number-cards {
+  display: flex;
+  gap: var(--space-2);
+}
+.number-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  background: var(--color-bg-offset);
+  border: 1px solid rgba(128, 128, 128, 0.1);
+  border-radius: var(--radius-lg);
+  padding: var(--space-3) var(--space-5);
+  min-width: 72px;
+}
+.number-value {
+  font-size: var(--font-size-2xl);
+  font-family: var(--font-family-mono);
+  color: var(--color-text);
+  line-height: 1;
+}
+.number-label {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+}
+</style>

Html Entities
Named	&{{ name }};
Hex	&#x{{ props.codepoint.toString(16).padStart(5, "0") }};
Dec	&#{{ props.codepoint }};