Browse Source

fix(archives): print-log filename column expands instead of clipping at 200px (#1406)

  Reporter on a 27" monitor saw long filenames truncated even though
  the Print Log table had plenty of unused horizontal space. The
  print-name `<span>` had a hard `truncate max-w-[200px]` cap that
  ignored viewport width entirely.

  Replaced with `break-words` + a `title` attribute, dropping the
  explicit max-width so the column auto-sizes to content. On wide
  screens the full name shows on a single line; on narrow ones it
  wraps inside the cell instead of forcing horizontal scroll. The
  `title` hover preserves the original tooltip affordance for the
  edge case where a really long name still gets wrapped.
maziggy 1 week ago
parent
commit
b9340389d3
4 changed files with 5 additions and 2 deletions
  1. 3 0
      CHANGELOG.md
  2. 1 1
      frontend/src/pages/ArchivesPage.tsx
  3. 0 0
      static/assets/index-CBOvp83T.js
  4. 1 1
      static/index.html

+ 3 - 0
CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to Bambuddy will be documented in this file.
 
 
 ## [0.2.5b1] - Unreleased
 ## [0.2.5b1] - Unreleased
 
 
+### Changed
+- **Archives → Print Log: filename column expands to fit available width and wraps long names instead of clipping at 200 px (#1406, requested by @daFreeMan)** — Reporter on a 27" monitor saw long filenames like `Simple_Print_Monitor_-_ST7789_1.54_display_case_` truncated even though the table had plenty of unused horizontal space. The print-name `<span>` had a hard `truncate max-w-[200px]` cap that ignored viewport width entirely. Replaced with `break-words` + a `title` attribute, dropping the explicit max-width so the column auto-sizes to content. On wide screens the full name shows on a single line; on narrow ones it wraps inside the cell instead of forcing horizontal scroll. The `title` hover preserves the original tooltip affordance for the rare case where a really long name still gets truncated by viewport constraints. Frontend build clean; 23 ArchivesPage tests still pass.
+
 ### Fixed
 ### Fixed
 - **Add Spool modal: hex colour field can be typed into character-by-character again (#1407, reported by @anthonyma94)** — Pre-fix, after typing the first hex character the input's value snapped to e.g. "A00000" (the #1055 fix aggressively padded to 8 chars on every keystroke), the cursor jumped to the end, and the next keystroke landed at position 7 — which the original 7-char-truncation branch then dropped. Net effect: only the first character was ever typed; the rest stayed as zeros unless the user pasted a full hex code. Fix splits "what the user is typing" from "what gets sent to the backend": the input now has its own draft state holding 0–6 chars freely, and `updateField('rgba', ...)` only fires once the draft reaches a complete 6-char RGB (commits as `<6chars>FF`). On blur, a partial 1–5 char draft is right-padded with `0` and committed so the form state always carries a valid 8-char rgba — preserves the #1055 invariant that the backend never sees a malformed value, without re-introducing the truncate-on-keystroke trap. A `useEffect` keeps the draft in sync when an external action (the colour picker, a swatch click, edit-mode load) changes the canonical hex. Paste of 7-/8-char strings truncates to the leading RGB triplet: Bambu filaments are opaque and the UI never exposed an alpha affordance, so dropping the (undocumented) "paste with alpha" case is fine. The existing `ColorSectionHexInput.test.tsx` was rewritten to match the new contract — 8 tests covering both new behaviours (draft reflects each keystroke, no commit while partial, commits on length 6, blur-padding for partials, no commit when cleared then blurred) and the kept #1055 invariants (committed rgba is always 8 hex chars, 7-/8-char paste truncates, non-hex chars stripped). 51 spool-form frontend tests green; frontend build clean.
 - **Add Spool modal: hex colour field can be typed into character-by-character again (#1407, reported by @anthonyma94)** — Pre-fix, after typing the first hex character the input's value snapped to e.g. "A00000" (the #1055 fix aggressively padded to 8 chars on every keystroke), the cursor jumped to the end, and the next keystroke landed at position 7 — which the original 7-char-truncation branch then dropped. Net effect: only the first character was ever typed; the rest stayed as zeros unless the user pasted a full hex code. Fix splits "what the user is typing" from "what gets sent to the backend": the input now has its own draft state holding 0–6 chars freely, and `updateField('rgba', ...)` only fires once the draft reaches a complete 6-char RGB (commits as `<6chars>FF`). On blur, a partial 1–5 char draft is right-padded with `0` and committed so the form state always carries a valid 8-char rgba — preserves the #1055 invariant that the backend never sees a malformed value, without re-introducing the truncate-on-keystroke trap. A `useEffect` keeps the draft in sync when an external action (the colour picker, a swatch click, edit-mode load) changes the canonical hex. Paste of 7-/8-char strings truncates to the leading RGB triplet: Bambu filaments are opaque and the UI never exposed an alpha affordance, so dropping the (undocumented) "paste with alpha" case is fine. The existing `ColorSectionHexInput.test.tsx` was rewritten to match the new contract — 8 tests covering both new behaviours (draft reflects each keystroke, no commit while partial, commits on length 6, blur-padding for partials, no commit when cleared then blurred) and the kept #1055 invariants (committed rgba is always 8 hex chars, 7-/8-char paste truncates, non-hex chars stripped). 51 spool-form frontend tests green; frontend build clean.
 
 

+ 1 - 1
frontend/src/pages/ArchivesPage.tsx

@@ -3763,7 +3763,7 @@ export function ArchivesPage() {
                                   onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
                                   onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
                                 />
                                 />
                               )}
                               )}
-                              <span className="text-white truncate max-w-[200px]">
+                              <span className="text-white break-words" title={entry.print_name || ''}>
                                 {entry.print_name || '—'}
                                 {entry.print_name || '—'}
                               </span>
                               </span>
                             </div>
                             </div>

File diff suppressed because it is too large
+ 0 - 0
static/assets/index-CBOvp83T.js


+ 1 - 1
static/index.html

@@ -26,7 +26,7 @@
 
 
     <!-- Splash screens for iOS -->
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-BvnKyMoU.js"></script>
+    <script type="module" crossorigin src="/assets/index-CBOvp83T.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-KYwGxnG9.css">
     <link rel="stylesheet" crossorigin href="/assets/index-KYwGxnG9.css">
   </head>
   </head>
   <body>
   <body>

Some files were not shown because too many files changed in this diff