From 13484928a18f9ce54136917066072e9ae4b6e0d2 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Wed, 8 Nov 2023 13:44:28 -0600
Subject: [PATCH]  Logs Panel: Table UI - Label names that are too long push
 out usage percentage in table column multi-select (#77824)

make checkbox sticky and scroll within label
---
 .../explore/Logs/LogsTableNavColumn.tsx       | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/app/features/explore/Logs/LogsTableNavColumn.tsx b/public/app/features/explore/Logs/LogsTableNavColumn.tsx
index 242af7a0213..05ea2f22c88 100644
--- a/public/app/features/explore/Logs/LogsTableNavColumn.tsx
+++ b/public/app/features/explore/Logs/LogsTableNavColumn.tsx
@@ -19,7 +19,25 @@ function getStyles(theme: GrafanaTheme2) {
       marginBottom: theme.spacing(1),
       justifyContent: 'space-between',
     }),
-    checkbox: css({}),
+    // Making the checkbox sticky and label scrollable for labels that are wider then the container
+    // However, the checkbox component does not support this, so we need to do some css hackery for now until the API of that component is updated.
+    checkboxLabel: css({
+      '> :first-child': {
+        position: 'sticky',
+        left: 0,
+        bottom: 0,
+        top: 0,
+      },
+      '> span': {
+        overflow: 'scroll',
+        '&::-webkit-scrollbar': {
+          display: 'none',
+        },
+        '&::-moz-scrollbar': {
+          display: 'none',
+        },
+      },
+    }),
     columnWrapper: css({
       marginBottom: theme.spacing(1.5),
       // need some space or the outline of the checkbox is cut off
@@ -107,7 +125,7 @@ export const LogsTableNavColumn = (props: {
         {labelKeys.sort(sortLabels(labels)).map((labelName) => (
           <div className={styles.wrap} key={labelName}>
             <Checkbox
-              className={styles.checkbox}
+              className={styles.checkboxLabel}
               label={labelName}
               onChange={() => toggleColumn(labelName)}
               checked={labels[labelName]?.active ?? false}