From af69a4c8f471c289ba1d768561842c446b06a5af Mon Sep 17 00:00:00 2001
From: George Gevoian <george@gevoian.com>
Date: Tue, 19 Dec 2023 00:15:35 -0500
Subject: [PATCH] (core) Make Raw Data page more responsive

Summary:
With both panels expanded and a narrow viewport, the tables on the
Raw Data page would visibly overflow. This improves things so that
overflow is handled more gracefully.

Test Plan: Manual.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D4147
---
 app/client/components/DataTables.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/client/components/DataTables.ts b/app/client/components/DataTables.ts
index bd9e93f2..db13e0d3 100644
--- a/app/client/components/DataTables.ts
+++ b/app/client/components/DataTables.ts
@@ -297,7 +297,7 @@ const cssList = styled('div', `
 
 const cssTable = styled('div', `
   display: grid;
-  grid-template-columns: 16px auto 100px 56px;
+  grid-template-columns: 16px minmax(32px, auto) minmax(0, 100px) minmax(0, 56px);
   grid-template-rows: 1fr;
   grid-column-gap: 8px;
   cursor: pointer;
@@ -342,6 +342,7 @@ const cssDetailsRow = styled('div', `
 // Holds dots menu (which is 24px x 24px)
 const cssTableButtons = styled('div', `
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
   column-gap: 8px;