Merge pull request #7760 from tinyspeck/sarabee-vtadmin-web-app-width

[vtadmin-web] Add common max-width to infrastructure table views
vitessio · Mar 29, 2021 · 92fd953 · 92fd953
2 parents 0b8ad1a + 22bb5e4
commit 92fd953
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 7 deletions.
diff --git a/web/vtadmin/src/components/routes/Clusters.tsx b/web/vtadmin/src/components/routes/Clusters.tsx
@@ -37,7 +37,7 @@ export const Clusters = () => {
         ));
 
     return (
-        <div>
+        <div className="max-width-content">
             <h1>Clusters</h1>
             <DataTable columns={['Name', 'Id']} data={rows} renderRows={renderRows} />
         </div>

diff --git a/web/vtadmin/src/components/routes/Gates.tsx b/web/vtadmin/src/components/routes/Gates.tsx
@@ -37,7 +37,7 @@ export const Gates = () => {
         ));
 
     return (
-        <div>
+        <div className="max-width-content">
             <h1>Gates</h1>
             <DataTable columns={['Cluster', 'Hostname']} data={rows} renderRows={renderRows} />
         </div>

diff --git a/web/vtadmin/src/components/routes/Keyspaces.tsx b/web/vtadmin/src/components/routes/Keyspaces.tsx
@@ -37,7 +37,7 @@ export const Keyspaces = () => {
         ));
 
     return (
-        <div>
+        <div className="max-width-content">
             <h1>Keyspaces</h1>
             <DataTable columns={['Cluster', 'Keyspace']} data={rows} renderRows={renderRows} />
         </div>

diff --git a/web/vtadmin/src/components/routes/Schemas.tsx b/web/vtadmin/src/components/routes/Schemas.tsx
@@ -44,7 +44,7 @@ export const Schemas = () => {
         });
 
     return (
-        <div>
+        <div className="max-width-content">
             <h1>Schemas</h1>
             <DataTable columns={['Cluster', 'Keyspace', 'Table']} data={rows} renderRows={renderRows} />
         </div>

diff --git a/web/vtadmin/src/components/routes/Tablets.module.scss b/web/vtadmin/src/components/routes/Tablets.module.scss
@@ -3,5 +3,4 @@
   grid-gap: 8px;
   grid-template-columns: 1fr min-content;
   margin-bottom: 24px;
-  max-width: 1200px;
 }
diff --git a/web/vtadmin/src/components/routes/Tablets.tsx b/web/vtadmin/src/components/routes/Tablets.tsx
@@ -51,7 +51,7 @@ export const Tablets = () => {
     }, []);
 
     return (
-        <div>
+        <div className="max-width-content">
             <h1>Tablets</h1>
             <div className={style.controls}>
                 <TextInput

diff --git a/web/vtadmin/src/index.css b/web/vtadmin/src/index.css
@@ -88,6 +88,9 @@
   --textColorInverted: #fff;
   --textColorSecondary: #718096;
   --textColorDisabled: #cbd5e0;
+
+  /* A common bounding width for views that don't require the full viewport. */
+  --contentWidth: 1200px;
 }
 
 /* Dark theme */
@@ -187,7 +190,11 @@ table tbody td {
   padding: var(--tableCellPadding);
 }
 
-/* Utilities */
+/* One-liner utilities */
+.max-width-content {
+  max-width: var(--contentWidth);
+}
+
 .text-color-secondary {
   color: var(--textColorSecondary);
 }