From dcb235a9fde353a215a14e48946cfc53deac79b0 Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Tue, 7 Jan 2025 16:07:54 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20improve=20images=20admin=20ui=20on?=
 =?UTF-8?q?=20small=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adminSiteClient/ImagesIndexPage.tsx | 14 ++++++++------
 adminSiteClient/admin.scss          |  8 ++++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/adminSiteClient/ImagesIndexPage.tsx b/adminSiteClient/ImagesIndexPage.tsx
index e18b000492b..09a4400c863 100644
--- a/adminSiteClient/ImagesIndexPage.tsx
+++ b/adminSiteClient/ImagesIndexPage.tsx
@@ -281,12 +281,13 @@ function createColumns({
             title: "Filename",
             dataIndex: "filename",
             key: "filename",
-            width: 300,
+            width: 200,
         },
         {
             title: "Alt text",
             dataIndex: "defaultAlt",
             key: "defaultAlt",
+            width: "auto",
             sorter: (a, b) =>
                 a.defaultAlt && b.defaultAlt
                     ? a.defaultAlt.localeCompare(b.defaultAlt)
@@ -309,7 +310,7 @@ function createColumns({
                 a.originalWidth && b.originalWidth
                     ? a.originalWidth - b.originalWidth
                     : 0,
-            width: 100,
+            width: 50,
         },
         {
             title: "Height",
@@ -319,13 +320,13 @@ function createColumns({
                 a.originalHeight && b.originalHeight
                     ? a.originalHeight - b.originalHeight
                     : 0,
-            width: 100,
+            width: 50,
         },
         {
             title: "Last updated",
             dataIndex: "updatedAt",
             key: "updatedAt",
-            width: 150,
+            width: 50,
             defaultSortOrder: "descend",
             sorter: (a, b) =>
                 a.updatedAt && b.updatedAt ? a.updatedAt - b.updatedAt : 0,
@@ -334,7 +335,7 @@ function createColumns({
         {
             title: "Owner",
             key: "userId",
-            width: 200,
+            width: 100,
             filters: [
                 {
                     text: "Unassigned",
@@ -375,7 +376,7 @@ function createColumns({
         {
             title: "Action",
             key: "action",
-            width: 100,
+            width: 50,
             render: (_, image) => {
                 const isDeleteDisabled = !!(usage && usage[image.id]?.length)
                 return (
@@ -658,6 +659,7 @@ export function ImageIndexPage() {
                         <PostImageButton postImage={api.postImage} />
                     </Flex>
                     <Table
+                        size="small"
                         columns={columns}
                         dataSource={filteredImages}
                         rowKey={(x) => x.id}
diff --git a/adminSiteClient/admin.scss b/adminSiteClient/admin.scss
index 966b05e0a57..7fc8df085ef 100644
--- a/adminSiteClient/admin.scss
+++ b/adminSiteClient/admin.scss
@@ -1224,6 +1224,14 @@ main:not(.ChartEditorPage):not(.GdocsEditPage) {
 }
 
 .ImageIndexPage {
+    @media (max-width: 1300px) {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+        .ant-table-cell {
+            padding-left: 4px !important;
+            padding-right: 4px !important;
+        }
+    }
     .ImageIndexPage__delete-user-button {
         border-radius: 50%;
         margin-left: 8px;