From bdb6c7ebfcade5f8255d2fe359751255e1ad56a8 Mon Sep 17 00:00:00 2001
From: Ian Roddis <31021769+iroddis@users.noreply.github.com>
Date: Mon, 17 Aug 2026 15:06:44 -0300
Subject: [PATCH] Tightening up scope page and adding mouseover hints

---
 app/static/css/style.css              | 106 ++++++++++++++++++++------
 app/templates/_scopes_table_card.html |  13 ++--
 2 files changed, 86 insertions(+), 33 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 790b405..f8e63f1 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -486,10 +486,24 @@ textarea:focus {
   margin-bottom: 0.5rem;
 }
 
-.ap-item-name { font-weight: 500; flex: 0 0 auto; }
-.ap-item-type { color: var(--muted); flex: 0 0 auto; font-size: 0.8rem; }
-.ap-item-conn { flex: 1; }
-.ap-item .row-actions { margin-left: auto; }
+.ap-item-name {
+  font-weight: 500;
+  flex: 0 0 auto;
+}
+
+.ap-item-type {
+  color: var(--muted);
+  flex: 0 0 auto;
+  font-size: 0.8rem;
+}
+
+.ap-item-conn {
+  flex: 1;
+}
+
+.ap-item .row-actions {
+  margin-left: auto;
+}
 
 .fit-item {
   padding: 0.5rem 0;
@@ -497,7 +511,9 @@ textarea:focus {
   font-size: 0.9rem;
 }
 
-.fit-item:last-of-type { border-bottom: none; }
+.fit-item:last-of-type {
+  border-bottom: none;
+}
 
 .fit-item-main {
   display: flex;
@@ -507,22 +523,41 @@ textarea:focus {
   margin-bottom: 0.3rem;
 }
 
-.fit-item-arrow { color: var(--muted); }
-
-.fit-badge {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 0.1rem 0.5rem;
-  border-radius: 999px;
-  font-weight: 600;
+.fit-item-arrow {
+  color: var(--muted);
 }
 
-.fit-badge-possible { background: var(--surface-2); color: var(--muted); }
-.fit-badge-exact { background: #16a34a26; color: #16a34a; }
-.fit-badge-none { background: #dc262626; color: #dc2626; }
+.fit-badge {
+  text-transform: uppercase;
+}
 
-.fit-notes { margin-top: 0.4rem; padding-left: 0.25rem; }
+/*
+  /*font-size: 0.7rem;
+letter-spacing: 0.03em;
+padding: 0.1rem 0.5rem;
+font-weight: 600;
+}
+*/
+
+.fit-badge-possible a {
+  background: var(--surface-2);
+  color: var(--muted);
+}
+
+.fit-badge-exact a {
+  background: #16a34a26;
+  color: #16a34a;
+}
+
+.fit-badge-none a {
+  background: #dc262626;
+  color: #dc2626;
+}
+
+.fit-notes {
+  margin-top: 0.4rem;
+  padding-left: 0.25rem;
+}
 
 /* Scope guide: stacked matching-part entries within a fit column cell. */
 .fit-cell-item {
@@ -532,14 +567,33 @@ textarea:focus {
   font-size: 0.85rem;
   white-space: nowrap;
 }
-.fit-cell-item + .fit-cell-item { margin-top: 0.3rem; }
 
-.fit-note { font-size: 0.85rem; margin-bottom: 0.3rem; }
-.fit-note-meta { color: var(--muted); font-size: 0.75rem; }
-.fit-note-body { margin: 0.1rem 0 0; }
+.fit-cell-item+.fit-cell-item {
+  margin-top: 0.3rem;
+}
 
-.fit-note-form { margin-top: 0.3rem; }
-.fit-note-form input[type="text"] { flex: 1; min-width: 12rem; }
+.fit-note {
+  font-size: 0.85rem;
+  margin-bottom: 0.3rem;
+}
+
+.fit-note-meta {
+  color: var(--muted);
+  font-size: 0.75rem;
+}
+
+.fit-note-body {
+  margin: 0.1rem 0 0;
+}
+
+.fit-note-form {
+  margin-top: 0.3rem;
+}
+
+.fit-note-form input[type="text"] {
+  flex: 1;
+  min-width: 12rem;
+}
 
 /* Pagination */
 .pagination {
@@ -670,7 +724,9 @@ textarea:focus {
   gap: 0.4rem;
 }
 
-.local-login-panel summary::-webkit-details-marker { display: none; }
+.local-login-panel summary::-webkit-details-marker {
+  display: none;
+}
 
 .local-login-panel summary::before {
   content: '›';
diff --git a/app/templates/_scopes_table_card.html b/app/templates/_scopes_table_card.html
index aa19d56..f49aebe 100644
--- a/app/templates/_scopes_table_card.html
+++ b/app/templates/_scopes_table_card.html
@@ -26,8 +26,6 @@
           <th data-sort-off><input type="checkbox" id="scopes-select-all" title="Select all"></th>
         {% endif %}
         <th>Scope</th>
-        <th>Manufacturer</th>
-        <th>Model</th>
         <th>Type</th>
         <th>Magnification</th>
         <th>Objective thread</th>
@@ -48,13 +46,11 @@
             <strong><a href="/admin/augmented-parts/{{ scope.id }}">{{ scope.description }}</a></strong>
             {% if scope.sku %}<br><span class="muted">{{ scope.sku }}</span>{% endif %}
           </td>
-          <td>{{ scope.manufacturer.name if scope.manufacturer else "—" }}</td>
-          <td>{{ scope.scope_model.name if scope.scope_model else "—" }}</td>
           <td>{{ scope.sub_part_type.name if scope.sub_part_type else "—" }}</td>
           <td>{{ magnification(info) }}</td>
           <td>
             {% if row.objective_attachment_point %}
-              <code>{{ connection_spec(row.objective_attachment_point) }}</code>
+              {{ connection_spec(row.objective_attachment_point) }}
             {% elif info and info.objective_thread_pitch %}
               {{ info.objective_thread_pitch }}
             {% else %}<span class="muted">—</span>{% endif %}
@@ -63,10 +59,11 @@
             {% set entries = row.cells.get(ct.id) %}
             <td>
               {% if entries %}
-                {% for e in entries %}
+              {% for e in entries %}
                   <div class="fit-cell-item">
-                    <span class="fit-badge fit-badge-{{ e.label }}">{{ e.label | capitalize }}</span>
-                    <a href="/admin/augmented-parts/{{ e.part.id }}">{{ e.part.description | truncate(48) }}</a>
+                    <span class="fit-badge fit-badge-{{ e.label }}">
+                      <a href="/admin/augmented-parts/{{ e.part.id }}" title="{{ e.part.description | truncate(48) }}">{{ e.part.sku }}</a>
+                    </span>
                   </div>
                 {% endfor %}
               {% else %}