header text

Author: mtrezza

src/dashboard/Data/Views/Views.react.js

@@ -610,31 +610,30 @@ class Views extends TableView {
 
       return (
         <div key={name} className={styles.headerWrap} style={{ width }}>
-          <span className={styles.headerText}>
-            <span className={styles.headerLabel}>{name}</span>
-            {isPointerColumn && (
-              <button
-                type="button"
-                className={styles.pointerIcon}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  this.handleOpenAllPointers(name);
-                  // Remove focus after action to follow UX best practices
-                  e.currentTarget.blur();
-                }}
-                aria-label={`Filter to show all pointers from ${name} column`}
-                title="Filter to show all pointers from this column"
-              >
-                <Icon
-                  name="right-outline"
-                  width={20}
-                  height={20}
-                  fill="white"
-                />
-              </button>
-            )}
-          </span>
+          <div className={styles.headerName}>{name}</div>
+          <div className={styles.headerType}>{columnType || 'String'}</div>
+          {isPointerColumn && (
+            <button
+              type="button"
+              className={styles.pointerIcon}
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                this.handleOpenAllPointers(name);
+                // Remove focus after action to follow UX best practices
+                e.currentTarget.blur();
+              }}
+              aria-label={`Filter to show all pointers from ${name} column`}
+              title="Filter to show all pointers from this column"
+            >
+              <Icon
+                name="right-outline"
+                width={20}
+                height={20}
+                fill="white"
+              />
+            </button>
+          )}
           <DragHandle className={styles.handle} onDrag={delta => this.handleResize(i, delta)} />
         </div>
       );

src/dashboard/Data/Views/Views.scss

@@ -11,31 +11,34 @@
   background: #66637A;
   color: white;
   font-size: 12px;
-  line-height: 30px;
-  padding: 0 16px;
+  height: 30px;
+  padding: 4px 16px;
   border-right: 1px solid #e3e3ea;
   position: relative;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.headerText {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 0; // Enable text truncation in flex containers
-}
-
-.headerLabel {
+.headerName {
   color: white;
   font-size: 12px;
+  height: 22px;
+  line-height: 22px;
+  margin-right: 8px;
+  float: left;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.headerType {
+  color: #A2A6B1;
+  font-size: 10px;
+  height: 22px;
+  line-height: 22px;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0; // Enable text truncation
 }
 
 .pointerIcon {