Set proper (max-) widths for table columns on lookup table pages (#4239)

Fixes #4172 (cherry picked from commit af8f81f)
Graylog2 · Oct 12, 2017 · fc43ef9 · fc43ef9
1 parent e518bcc
commit fc43ef9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git a/graylog2-web-interface/src/components/lookup-tables/CachesOverview.jsx b/graylog2-web-interface/src/components/lookup-tables/CachesOverview.jsx
@@ -106,16 +106,16 @@ const CachesOverview = React.createClass({
                 <Button bsStyle="link" className={Styles.searchHelpButton}><i className="fa fa-fw fa-question-circle" /></Button>
               </OverlayTrigger>
             </SearchForm>
-            <Table condensed hover>
+            <Table condensed hover className={Styles.overviewTable}>
               <thead>
                 <tr>
-                  <th>Title</th>
-                  <th>Description</th>
-                  <th>Name</th>
+                  <th className={Styles.rowTitle}>Title</th>
+                  <th className={Styles.rowDescription}>Description</th>
+                  <th className={Styles.rowName}>Name</th>
                   <th>Entries</th>
                   <th>Hit rate</th>
                   <th>Throughput</th>
-                  <th className={Styles.actions}>Actions</th>
+                  <th className={Styles.rowActions}>Actions</th>
                 </tr>
               </thead>
               {caches}

diff --git a/graylog2-web-interface/src/components/lookup-tables/DataAdaptersOverview.jsx b/graylog2-web-interface/src/components/lookup-tables/DataAdaptersOverview.jsx
@@ -109,14 +109,14 @@ const DataAdaptersOverview = React.createClass({
                 <Button bsStyle="link" className={Styles.searchHelpButton}><i className="fa fa-fw fa-question-circle" /></Button>
               </OverlayTrigger>
             </SearchForm>
-            <Table condensed hover>
+            <Table condensed hover className={Styles.overviewTable}>
               <thead>
                 <tr>
-                  <th>Title</th>
-                  <th>Description</th>
-                  <th>Name</th>
+                  <th className={Styles.rowTitle}>Title</th>
+                  <th className={Styles.rowDescription}>Description</th>
+                  <th className={Styles.rowName}>Name</th>
                   <th>Throughput</th>
-                  <th className={Styles.actions}>Actions</th>
+                  <th className={Styles.rowActions}>Actions</th>
                 </tr>
               </thead>
               {dataAdapters}

diff --git a/graylog2-web-interface/src/components/lookup-tables/LookupTablesOverview.jsx b/graylog2-web-interface/src/components/lookup-tables/LookupTablesOverview.jsx
@@ -134,15 +134,15 @@ const LookupTablesOverview = React.createClass({
                 <Button bsStyle="link" className={Styles.searchHelpButton}><i className="fa fa-fw fa-question-circle" /></Button>
               </OverlayTrigger>
             </SearchForm>
-            <Table condensed hover>
+            <Table condensed hover className={Styles.overviewTable}>
               <thead>
                 <tr>
-                  <th>Title</th>
-                  <th>Description</th>
-                  <th>Name</th>
-                  <th>Cache</th>
-                  <th>Data Adapter</th>
-                  <th className={Styles.actions}>Actions</th>
+                  <th className={Styles.rowTitle}>Title</th>
+                  <th className={Styles.rowDescription}>Description</th>
+                  <th className={Styles.rowName}>Name</th>
+                  <th className={Styles.rowCache}>Cache</th>
+                  <th className={Styles.rowAdapter}>Data Adapter</th>
+                  <th className={Styles.rowActions}>Actions</th>
                 </tr>
               </thead>
               {lookupTables}

diff --git a/graylog2-web-interface/src/components/lookup-tables/Overview.css b/graylog2-web-interface/src/components/lookup-tables/Overview.css
@@ -1,6 +1,4 @@
-:local(.actions) {
-    max-width: 150px;
-}
+
 
 :local(.searchHelpButton) {
     cursor: help;
@@ -11,4 +9,30 @@
 :local(.popoverWide) {
     max-width: 500px;
     min-width: 350px;
+}
+
+/* styles for table columns */
+:local(.rowTitle) {
+    width: 15%;
+}
+:local(.rowDescription) {
+    max-width: 50%;
+    width: 35%
+}
+:local(.rowName) {
+    width: 15%;
+}
+:local(.rowCache) {
+    width: 15%;
+}
+:local(.rowAdapter) {
+    width: 15%;
+}
+:local(.rowActions) {
+    min-width: 100px;
+}
+
+:local(overviewTable) {
+    width: 100%;
+    table-layout: fixed;
 }