Table: Make last cell value visible when right aligned (#24921)

* add some padding to accommodate for vertical scrollbar

* use theme spacing

* Move padding to inner div and make it use actual scrollbar width

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/Table/styles.ts

 import { css } from 'emotion';
 import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory, styleMixins } from '../../themes';
 import { stylesFactory, styleMixins } from '../../themes';
+import { getScrollbarWidth } from '../../utils';
 
 
 export interface TableStyles {
 export interface TableStyles {
   cellHeight: number;
   cellHeight: number;
@@ -31,6 +32,7 @@ export const getTableStyles = stylesFactory(
     const bodyFontSize = 14;
     const bodyFontSize = 14;
     const cellHeight = padding * 2 + bodyFontSize * lineHeight;
     const cellHeight = padding * 2 + bodyFontSize * lineHeight;
     const rowHoverBg = styleMixins.hoverColor(theme.colors.bg1, theme);
     const rowHoverBg = styleMixins.hoverColor(theme.colors.bg1, theme);
+    const scollbarWidth = getScrollbarWidth();
 
 
     return {
     return {
       theme,
       theme,
@@ -53,7 +55,7 @@ export const getTableStyles = stylesFactory(
         position: relative;
         position: relative;
       `,
       `,
       headerCell: css`
       headerCell: css`
-        padding: ${padding}px 10px;
+        padding: ${padding}px;
         cursor: pointer;
         cursor: pointer;
         overflow: hidden;
         overflow: hidden;
         white-space: nowrap;
         white-space: nowrap;
@@ -82,13 +84,17 @@ export const getTableStyles = stylesFactory(
 
 
         &:last-child {
         &:last-child {
           border-right: none;
           border-right: none;
+
+          > div {
+            padding-right: ${scollbarWidth + padding}px;
+          }
         }
         }
       `,
       `,
       tableCellLink: css`
       tableCellLink: css`
         text-decoration: underline;
         text-decoration: underline;
       `,
       `,
       tableCell: css`
       tableCell: css`
-        padding: ${padding}px 10px;
+        padding: ${padding}px;
         text-overflow: ellipsis;
         text-overflow: ellipsis;
         white-space: nowrap;
         white-space: nowrap;
         overflow: hidden;
         overflow: hidden;

packages/grafana-ui/src/utils/index.ts

@@ -3,6 +3,7 @@ export * from './validate';
 export * from './slate';
 export * from './slate';
 export * from './dataLinks';
 export * from './dataLinks';
 export * from './tags';
 export * from './tags';
+export * from './scrollbar';
 export * from './measureText';
 export * from './measureText';
 export { default as ansicolor } from './ansicolor';
 export { default as ansicolor } from './ansicolor';
 
 

public/app/core/utils/scrollbar.ts → packages/grafana-ui/src/utils/scrollbar.ts

-// Slightly modified, but without dependancies:
+// Slightly modified, but without dependancies:
 // https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js
 // https://raw.githubusercontent.com/malte-wessel/react-custom-scrollbars/master/src/utils/getScrollbarWidth.js
 let scrollbarWidth: number | null = null;
 let scrollbarWidth: number | null = null;
 
 
-export default function getScrollbarWidth() {
+export function getScrollbarWidth() {
   if (scrollbarWidth !== null) {
   if (scrollbarWidth !== null) {
     return scrollbarWidth;
     return scrollbarWidth;
   }
   }
@@ -31,11 +31,3 @@ export default function getScrollbarWidth() {
   }
   }
   return scrollbarWidth || 0;
   return scrollbarWidth || 0;
 }
 }
-
-const hasNoOverlayScrollbars = getScrollbarWidth() > 0;
-
-export const addClassIfNoOverlayScrollbar = (classname: string, htmlElement: HTMLElement = document.body) => {
-  if (hasNoOverlayScrollbars) {
-    htmlElement.classList.add(classname);
-  }
-};

public/app/app.ts

@@ -35,7 +35,6 @@ import {
   setTimeZoneResolver,
   setTimeZoneResolver,
 } from '@grafana/data';
 } from '@grafana/data';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
-import { addClassIfNoOverlayScrollbar } from 'app/core/utils/scrollbar';
 import { checkBrowserCompatibility } from 'app/core/utils/browser';
 import { checkBrowserCompatibility } from 'app/core/utils/browser';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
 import { angularModules, coreModule } from 'app/core/core_module';
 import { angularModules, coreModule } from 'app/core/core_module';
@@ -47,7 +46,7 @@ import { reportPerformance } from './core/services/echo/EchoSrv';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 import 'app/routes/GrafanaCtrl';
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
 import 'app/features/all';
-import { getStandardFieldConfigs, getStandardOptionEditors } from '@grafana/ui';
+import { getStandardFieldConfigs, getStandardOptionEditors, getScrollbarWidth } from '@grafana/ui';
 import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
 import { getDefaultVariableAdapters, variableAdapters } from './features/variables/adapters';
 import { initDevFeatures } from './dev';
 import { initDevFeatures } from './dev';
 import { getStandardTransformers } from 'app/core/utils/standardTransformers';
 import { getStandardTransformers } from 'app/core/utils/standardTransformers';
@@ -75,7 +74,6 @@ export class GrafanaApp {
   preBootModules: any[] | null;
   preBootModules: any[] | null;
 
 
   constructor() {
   constructor() {
-    addClassIfNoOverlayScrollbar('no-overlay-scrollbar');
     this.preBootModules = [];
     this.preBootModules = [];
     this.registerFunctions = {};
     this.registerFunctions = {};
     this.ngModuleDependencies = [];
     this.ngModuleDependencies = [];
@@ -94,6 +92,7 @@ export class GrafanaApp {
   init() {
   init() {
     const app = angular.module('grafana', []);
     const app = angular.module('grafana', []);
 
 
+    addClassIfNoOverlayScrollbar();
     setLocale(config.bootData.user.locale);
     setLocale(config.bootData.user.locale);
     setTimeZoneResolver(() => config.bootData.user.timeZone);
     setTimeZoneResolver(() => config.bootData.user.timeZone);
 
 
@@ -216,4 +215,10 @@ export class GrafanaApp {
   }
   }
 }
 }
 
 
+function addClassIfNoOverlayScrollbar() {
+  if (getScrollbarWidth() > 0) {
+    document.body.classList.add('no-overlay-scrollbar');
+  }
+}
+
 export default new GrafanaApp();
 export default new GrafanaApp();