explore logs styling poc, WIP

public/app/features/explore/Logs.tsx

@@ -64,18 +64,18 @@ function Row({
     'logs-row-match-highlight--preview': previewHighlights,
   });
   return (
-    <>
+    <div className="logs-row">
       {showDuplicates && (
         <div className="logs-row-duplicates">{row.duplicates > 0 ? `${row.duplicates + 1}x` : null}</div>
       )}
       <div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''} />
       {showUtc && (
-        <div className="logs-row-time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
+        <div className="logs-row__time" title={`Local: ${row.timeLocal} (${row.timeFromNow})`}>
           {row.timestamp}
         </div>
       )}
       {showLocalTime && (
-        <div className="logs-row-time" title={`${row.timestamp} (${row.timeFromNow})`}>
+        <div className="logs-row__time" title={`${row.timestamp} (${row.timeFromNow})`}>
           {row.timeLocal}
         </div>
       )}
@@ -96,7 +96,7 @@ function Row({
           row.entry
         )}
       </div>
-    </>
+    </div>
   );
 }
 
@@ -263,25 +263,25 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
     }
 
     // Grid options
-    const cssColumnSizes = [];
-    if (showDuplicates) {
-      cssColumnSizes.push('max-content');
-    }
-    // Log-level indicator line
-    cssColumnSizes.push('3px');
-    if (showUtc) {
-      cssColumnSizes.push('minmax(100px, max-content)');
-    }
-    if (showLocalTime) {
-      cssColumnSizes.push('minmax(100px, max-content)');
-    }
-    if (showLabels) {
-      cssColumnSizes.push('fit-content(20%)');
-    }
-    cssColumnSizes.push('1fr');
-    const logEntriesStyle = {
-      gridTemplateColumns: cssColumnSizes.join(' '),
-    };
+    // const cssColumnSizes = [];
+    // if (showDuplicates) {
+    //   cssColumnSizes.push('max-content');
+    // }
+    // // Log-level indicator line
+    // cssColumnSizes.push('3px');
+    // if (showUtc) {
+    //   cssColumnSizes.push('minmax(220px, max-content)');
+    // }
+    // if (showLocalTime) {
+    //   cssColumnSizes.push('minmax(140px, max-content)');
+    // }
+    // if (showLabels) {
+    //   cssColumnSizes.push('fit-content(20%)');
+    // }
+    // cssColumnSizes.push('1fr');
+    // const logEntriesStyle = {
+    //   gridTemplateColumns: cssColumnSizes.join(' '),
+    // };
 
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
 
@@ -342,7 +342,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
           </div>
         </div>
 
-        <div className="logs-entries" style={logEntriesStyle}>
+        <div className="logs-rows">
           {hasData &&
             !deferLogs &&
             // Only inject highlighterExpression in the first set for performance reasons

public/sass/_grafana.scss

@@ -101,6 +101,7 @@
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';
+@import 'components/logs-rows';
 
 // PAGES
 @import 'pages/login';

public/sass/components/_logs-rows.scss

+.logs-rows {
+  // display: grid;
+  // grid-column-gap: 1rem;
+  // grid-row-gap: 0.1rem;
+  // font-family: $font-family-monospace;
+  // font-size: 12px;
+  display: table;
+}
+
+.logs-row {
+  display: table-row;
+
+  > div {
+    display: table-cell;
+  }
+}
+
+.logs-row__time {
+  white-space: nowrap;
+}
+
+.logs-row__message {
+}

public/sass/pages/_explore.scss

@@ -289,14 +289,6 @@
       top: 4px;
     }
 
-    .logs-entries {
-      display: grid;
-      grid-column-gap: 1rem;
-      grid-row-gap: 0.1rem;
-      font-family: $font-family-monospace;
-      font-size: 12px;
-    }
-
     .logs-row-match-highlight {
       // Undoing mark styling
       background: inherit;
@@ -319,6 +311,9 @@
       opacity: 0.8;
     }
 
+    .logs-row__time {
+    }
+
     .logs-row-level-critical,
     .logs-row-level-crit {
       background-color: #705da0;