Fixing width issue and scrollbar issue on suggestions on mac (#2075)

## Context

Virtual tables weren't rendered properly on mac where the scrollbars
have different sizes.

## Proposed solution

- Adding a static space of 13px for scrollbars on all platforms. This
was tested on Chrome/FF Linux/Windows/Mac and looks reasonable well
- Fixing border issue (not related to the scrollbar). Border was cat
halfway on wider tables.

## Has this been tested?

Manual tests only

Author: berhalak

app/client/components/GridView.ts

@@ -533,20 +533,25 @@ export default class GridView extends BaseView {
       if (this._rowHeights.length > 0) {
         this._applyAutoWidth();
         this.scrolly.updateSize();
-        const scrollbarWidth = 22;
+
+        // Scrollbars have different widths on different platforms, so we need to re-apply
+
+        const scrollSize = scrollBar();
         const borderWidth = 2;
         const headerHeight = 23;
         const maxHeight = this.gridOptions?.maxInlineHeight || 600;
         const maxWidth = this.gridOptions?.maxInlineWidth || 800;
-        const totalHeight = this._rowHeights.reduce((sum, value) => sum + value, 0) + headerHeight + borderWidth;
+        const totalHeight = this._rowHeights.reduce((sum, value) => sum + value, 0) +
+          headerHeight + borderWidth + scrollSize.height;
         const targetHeight = Math.min(totalHeight, maxHeight);
         const widthObs = Observable.create<number>(this, 0);
 
         const updateWidth = () => {
           if (this.isDisposed()) { return; }
           const fields = this.viewSection.viewFields().all();
           const fieldsWidthSum = fields.reduce((sum, field) => sum + field.widthDef.peek(), 0);
-          const targetWidth =  Math.min(fieldsWidthSum + ROW_NUMBER_WIDTH + scrollbarWidth, maxWidth);
+
+          const targetWidth =  Math.min(fieldsWidthSum + ROW_NUMBER_WIDTH + scrollSize.width, maxWidth);
           widthObs.set(targetWidth);
         };
         updateWidth();
@@ -2490,3 +2495,11 @@ function calcZebra(hex: string) {
 function styleCustomVar(property: string, valueObs: BindableValue<string | number>): DomElementMethod {
   return elem => subscribeElem(elem, valueObs, val => elem.style.setProperty(property, String(val)));
 }
+
+function scrollBar(): { width: number; height: number } {
+  // Currently this feature is limited to suggestions only in virtual tables, that are showing
+  // inline grids. For this sake we can assume that scrollbars are always visible and have
+  // standard width/height across all browsers.
+  // Tested on Chrome/FF Linux/Windows/MacOS.
+  return { width: 13, height: 13 };
+}

app/client/components/ViewLayout.css

@@ -89,10 +89,6 @@
   border: 1px solid var(--grist-theme-widget-border, var(--grist-color-dark-grey));
 }
 
-.diff .view_data_pane_container {
-  border: none;
-}
-
 @media not print {
 .active_section > .view_data_pane_container {
   box-shadow: -2px 0 0 0px var(--grist-theme-widget-active-border, var(--grist-color-light-green));

app/client/ui/ProposedChangesPage.ts

@@ -209,7 +209,7 @@ and is subject to change and withdrawal.`,
                 ),
                 buildComparisonDetails(this, this.gristDoc, details, proposal.comparison.comparison),
                 proposal.status.status === "dismissed" ? "DISMISSED" : null,
-                isReadOnly ? null : cssDataRow(
+                isReadOnly ? null : cssButtonRow(
                   applied ? null : primaryButton(
                     t("Accept"),
                     dom.on("click", async () => {
@@ -686,6 +686,12 @@ const cssDataRow = styled("div", `
   margin: 16px 0px;
   font-size: ${vars.mediumFontSize};
   color: ${theme.text};
+  & .view_data_pane_container {
+    width: max-content;
+  }
+`);
+
+const cssButtonRow = styled(cssDataRow, `
   width: 360px;
 `);