From 5619bb27a1a1b203b780c25adb28f661660b2eb8 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Mon, 20 Oct 2025 13:51:43 +0200
Subject: [PATCH] frontend: styling

---
 frontend/src/documents/DocumentsTable.jsx | 19 +++++++++++++++----
 frontend/src/styles.css                   | 19 ++++++++++++-------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index 86a3c1b..10e8f3b 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -1,16 +1,25 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import {getAssetFromVersion, resolveDocumentAssetUrl} from '../asset_manager';
+import { getAssetFromVersion, resolveDocumentAssetUrl } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
 import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon, FolderIcon } from '../ui/icons';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
+const DEFAULT_GRID_ICON_SIZE = 96;
+const DEFAULT_GRID_TITLE_SIZE = '11px';
+const LIST_ICON_SIZE = 48;
 
 const getPageCount = (doc) =>
   Number.isFinite(doc?.current_version?.metadata?.page_count)
     ? doc.current_version.metadata.page_count
     : null;
 
-const DocumentThumbnailImage = ({ document, ensureAssetUrl, getDocumentAsset, alt, maxSize = 48 }) => {
+const DocumentThumbnailImage = ({
+  document,
+  ensureAssetUrl,
+  getDocumentAsset,
+  alt,
+  maxSize = LIST_ICON_SIZE,
+}) => {
   const resolvedMaxSize = Math.max(1, Math.round(maxSize || 1));
   const thumbnailAsset = useMemo(() => getAssetFromVersion(document?.current_version, 'thumbnail'), [document?.current_version]);
   const assetWidth = Number(thumbnailAsset?.metadata?.width);
@@ -129,6 +138,7 @@ const DocumentsTable = ({
   );
   const scrollRef = useRef(null);
   const isGridView = viewMode === 'grid';
+  const gridIconSize = DEFAULT_GRID_ICON_SIZE;
   const handleSetViewMode = useCallback(
     (nextMode) => {
       if (!onViewModeChange) {
@@ -369,6 +379,7 @@ const DocumentsTable = ({
               className="documents-grid"
               role="list"
               onClick={handleGridBackgroundClick}
+              style={{ '--documents-grid-icon-size': `${gridIconSize}px` }}
             >
               {!showingSearchResults &&
                 subfolders.map((folder) => {
@@ -417,7 +428,7 @@ const DocumentsTable = ({
                       <div className="folder-card__icon">
                         <FolderIcon
                           className="folder-card__icon-svg"
-                          size={128}
+                          size={gridIconSize}
                         />
                       </div>
                       <div className="folder-card__meta">
@@ -461,7 +472,7 @@ const DocumentsTable = ({
                       ensureAssetUrl={ensureAssetUrl}
                       getDocumentAsset={getDocumentAsset}
                       alt={`Thumbnail for ${doc.title || doc.original_name}`}
-                      maxSize={128}
+                      maxSize={gridIconSize}
                     />
                     <div className="document-card__meta">
                       <div
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9e35802..1b731cb 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -36,6 +36,8 @@
   --sidebar-hover-bg: rgba(63, 106, 216, 0.08);
   --sidebar-active-bg: rgba(63, 106, 216, 0.16);
   --selection-ring: #9bb6ff;
+  --documents-grid-title-size: 12px;
+  --documents-grid-icon-size: 128px;
 
   /* Semantic colors */
   --success: #2e7d6b;
@@ -1179,13 +1181,15 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel--view-grid .document-thumbnail-wrapper {
-  width: 128px;
-  height: 128px;
+  width: var(--documents-grid-icon-size);
+  height: var(--documents-grid-icon-size);
   padding: 8px;
   border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-
 .document-thumbnail-inner {
   position: relative;
   display: inline-flex;
@@ -1316,7 +1320,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .documents-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--documents-grid-icon-size), 1fr));
   gap: 0.3rem 1.3rem;
   padding: 0;
 }
@@ -1358,6 +1362,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   border-radius: 1rem;
   max-width: 100%;
   word-break: break-word;
+  font-size: var(--documents-grid-title-size);
 }
 
 .document-card.selected .document-card__title {
@@ -1386,8 +1391,8 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 128px;
-  height: 128px;
+  width: var(--documents-grid-icon-size);
+  height: var(--documents-grid-icon-size);
 }
 
 .folder-card__icon-svg {
@@ -1408,11 +1413,11 @@ button.icon-button.ghost:hover:not([disabled]) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: break-word;
+  font-size: var(--documents-grid-title-size);
 }
 
 
 .doc-name__title {
-  font-weight: 600;
   max-width: 100%;
   word-break: break-word;
 }