feat: More readable Document settings

First implementation of gristlabs#1289
hexaltation · Jan 13, 2025 · 780b0cc · 780b0cc
1 parent 5d4a914
commit 780b0cc
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/app/client/ui/AdminPanelCss.ts b/app/client/ui/AdminPanelCss.ts
@@ -106,7 +106,7 @@ const cssItem = styled('div', `
 
 const cssItemShort = styled('div', `
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   padding: 8px;
   margin: 0 -8px;
@@ -131,7 +131,7 @@ const cssItemShort = styled('div', `
 `);
 
 const cssItemName = styled('div', `
-  width: 150px;
+  width: 230px;
   font-weight: bold;
   display: flex;
   align-items: center;
@@ -159,6 +159,7 @@ const cssItemName = styled('div', `
 `);
 
 const cssItemDescription = styled('div', `
+  max-width: 250px;
   margin-right: auto;
   margin-bottom: -1px; /* aligns with the value */
 `);

diff --git a/app/client/ui/DocumentSettings.ts b/app/client/ui/DocumentSettings.ts
@@ -63,7 +63,7 @@ export class DocSettingsPage extends Disposable {
     const isDocEditor = isOwnerOrEditor(docPageModel.currentDoc.get());
 
     return cssContainer(
-      dom.create(AdminSection, t('Document Settings'), [
+      dom.create(cssAdminSection, t('Document Settings'), [
         dom.create(AdminSectionItem, {
           id: 'timezone',
           name: t('Time Zone'),
@@ -87,7 +87,7 @@ export class DocSettingsPage extends Disposable {
         }),
       ]),
 
-      dom.create(AdminSection, t('Data Engine'), [
+      dom.create(cssAdminSection, t('Data Engine'), [
         dom.create(AdminSectionItem, {
           id: 'timings',
           name: t('Formula timer'),
@@ -137,7 +137,7 @@ export class DocSettingsPage extends Disposable {
         }) : null,
       ]),
 
-      dom.create(AdminSection, t('API'), [
+      dom.create(cssAdminSection, t('API'), [
         dom.create(AdminSectionItem, {
           id: 'documentId',
           name: t('Document ID'),
@@ -509,3 +509,7 @@ const cssWrap = styled('p', `
 const cssRedText = styled('span', `
   color: ${theme.errorText};
 `);
+
+const cssAdminSection = styled(AdminSection, `
+  max-width: 750px;
+`);