From 49b2a6e00aab96bf021207694af6f75194297be1 Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Wed, 8 Jul 2026 23:33:08 -0500
Subject: [PATCH] fix image viewer file name and back button not always being
 visible on mobile

---
 .changeset/fix-image-viewer-header-small-screens.md | 5 +++++
 src/app/components/Pdf-viewer/PdfViewer.css.ts      | 6 ++++++
 src/app/components/image-viewer/ImageViewer.css.ts  | 6 ++++++
 src/app/components/text-viewer/TextViewer.css.ts    | 6 ++++++
 4 files changed, 23 insertions(+)
 create mode 100644 .changeset/fix-image-viewer-header-small-screens.md

diff --git a/.changeset/fix-image-viewer-header-small-screens.md b/.changeset/fix-image-viewer-header-small-screens.md
new file mode 100644
index 000000000..89efacaec
--- /dev/null
+++ b/.changeset/fix-image-viewer-header-small-screens.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix the image viewer header not being fully visible on smaller phone screens.
diff --git a/src/app/components/Pdf-viewer/PdfViewer.css.ts b/src/app/components/Pdf-viewer/PdfViewer.css.ts
index 465510983..b58378326 100644
--- a/src/app/components/Pdf-viewer/PdfViewer.css.ts
+++ b/src/app/components/Pdf-viewer/PdfViewer.css.ts
@@ -16,6 +16,12 @@ export const PdfViewerHeader = style([
     borderBottomWidth: config.borderWidth.B300,
     flexShrink: 0,
     gap: config.space.S200,
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    height: 'auto',
+    minHeight: config.space.S400,
+    paddingTop: config.space.S100,
+    paddingBottom: config.space.S100,
   },
 ]);
 export const PdfViewerFooter = style([
diff --git a/src/app/components/image-viewer/ImageViewer.css.ts b/src/app/components/image-viewer/ImageViewer.css.ts
index 220afaaeb..d140df8a5 100644
--- a/src/app/components/image-viewer/ImageViewer.css.ts
+++ b/src/app/components/image-viewer/ImageViewer.css.ts
@@ -16,6 +16,12 @@ export const ImageViewerHeader = style([
     borderBottomWidth: config.borderWidth.B300,
     flexShrink: 0,
     gap: config.space.S200,
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    height: 'auto',
+    minHeight: config.space.S400,
+    paddingTop: config.space.S100,
+    paddingBottom: config.space.S100,
   },
 ]);
 
diff --git a/src/app/components/text-viewer/TextViewer.css.ts b/src/app/components/text-viewer/TextViewer.css.ts
index 15f0e78b4..376c91f80 100644
--- a/src/app/components/text-viewer/TextViewer.css.ts
+++ b/src/app/components/text-viewer/TextViewer.css.ts
@@ -16,6 +16,12 @@ export const TextViewerHeader = style([
     borderBottomWidth: config.borderWidth.B300,
     flexShrink: 0,
     gap: config.space.S200,
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    height: 'auto',
+    minHeight: config.space.S400,
+    paddingTop: config.space.S100,
+    paddingBottom: config.space.S100,
   },
 ]);