✨ improve images admin ui on small screens

owid · Jan 7, 2025 · 95e5c13 · 95e5c13
1 parent c8cf78e
commit 95e5c13
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git 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 (

diff --git 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;