fix table padding (grafana#3947)

ashrayjain · May 24, 2023 · 80a2a47 · 80a2a47
1 parent 1378846
commit 80a2a47
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/web/ui/src/features/component/ComponentList.module.css b/web/ui/src/features/component/ComponentList.module.css
@@ -10,6 +10,7 @@
   background: none;
   background-color: rgb(56, 133, 220);
   color: #ffffff;
+  margin-left: auto;
 
   border: 1px solid rgb(56, 133, 220);
   border-radius: 3px;
@@ -19,6 +20,16 @@
   padding: 0px 15px;
   line-height: 24px;
   font-size: 0.8em;
+}
+
+.idColumn {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
 
-  float: right;
+.idName {
+  width: 80%;
+  word-wrap: break-word;
+  display: inline-block;
 }
diff --git a/web/ui/src/features/component/ComponentList.tsx b/web/ui/src/features/component/ComponentList.tsx
@@ -16,19 +16,19 @@ interface ComponentListProps {
 const TABLEHEADERS = ['Health', 'ID'];
 
 const ComponentList = ({ components }: ComponentListProps) => {
-  const tableStyles = { width: '100px' };
+  const tableStyles = { width: '130px' };
 
   /**
    * Custom renderer for table data
    */
   const renderTableData = () => {
     return components.map(({ health, id }) => (
-      <tr key={id} style={{ lineHeight: '2' }}>
+      <tr key={id} style={{ lineHeight: '2.5' }}>
         <td>
           <HealthLabel health={health.state} />
         </td>
-        <td>
-          <span>{id}</span>
+        <td className={styles.idColumn}>
+          <span className={styles.idName}>{id}</span>
           <NavLink to={'/component/' + id} className={styles.viewButton}>
             View
           </NavLink>