Quellcode durchsuchen

fix(archives): hide truncated "Re..." / "Sc..." button labels on narrow card widths (issue #1249)

  The archive card's action row crams 6 buttons into one line: 2 labelled
  (Reprint + Schedule, or Slice when un-sliced) plus 4 icon-only utilities.
  The labelled buttons used `flex-1` to share whatever the icon buttons
  left over, with the label gated on `hidden sm:inline truncate`.

  Tailwind viewport breakpoints can't see the card width. The grid grows
  columns alongside viewport (md:2 lg:3 xl:4), so cards stay ~320-380 px
  wide regardless of breakpoint, and the labelled buttons end up with
  ~30 px of space — enough to render "Re..." / "Sc..." and not much else.

  Bump the label breakpoint sm: -> xl: so labels appear only at
  viewport >= 1280px where the cards actually have room. Below that,
  the buttons render icon-only and the existing title= attribute serves
  as the hover tooltip.
maziggy vor 2 Wochen
Ursprung
Commit
a193145522

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
CHANGELOG.md


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

@@ -1103,7 +1103,7 @@ function ArchiveCard({
                 title={!archive.file_path ? t('archives.card.noFileForReprint') : !canModify('archives', 'reprint', archive.created_by_id) ? t('archives.card.noPermissionReprint') : undefined}
               >
                 <Printer className="w-3 h-3 flex-shrink-0" />
-                <span className="hidden sm:inline truncate">{t('archives.card.reprint')}</span>
+                <span className="hidden xl:inline truncate">{t('archives.card.reprint')}</span>
               </Button>
               <Button
                 variant="secondary"
@@ -1114,7 +1114,7 @@ function ArchiveCard({
                 title={!archive.file_path ? t('archives.card.noFileForReprint') : !hasPermission('queue:create') ? t('archives.permission.noAddToQueue') : t('archives.card.schedulePrint')}
               >
                 <Calendar className="w-3 h-3 flex-shrink-0" />
-                <span className="hidden sm:inline truncate">{t('archives.card.schedule')}</span>
+                <span className="hidden xl:inline truncate">{t('archives.card.schedule')}</span>
               </Button>
               <Button
                 variant="secondary"
@@ -1150,7 +1150,7 @@ function ArchiveCard({
               ) : (
                 <ExternalLink className="w-3 h-3 flex-shrink-0" />
               )}
-              <span className="hidden sm:inline truncate">{t('archives.card.slice')}</span>
+              <span className="hidden xl:inline truncate">{t('archives.card.slice')}</span>
             </Button>
           )}
           <Button

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
static/assets/index-BSBzgKvT.css


Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
static/assets/index-TQAsqf5J.js


+ 2 - 2
static/index.html

@@ -26,8 +26,8 @@
 
     <!-- Splash screens for iOS -->
     <link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
-    <script type="module" crossorigin src="/assets/index-C42VWlxK.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DA-wcENs.css">
+    <script type="module" crossorigin src="/assets/index-TQAsqf5J.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BSBzgKvT.css">
   </head>
   <body>
     <div id="root"></div>

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.