Fix data explorer layout bug (#9838)

Cherry picking `c3c321abe6bd7314cf98c9d29a5d78c0cf5caa12` into the
`prerelease/2025.10` branch from
#9836.

I chatted with @juliasilge who reviewed the changes and agreed to
cherry-pick the change if possible!

### Release Notes

<!--
Optionally, replace `N/A` with text to be included in the next release
notes.
The `N/A` bullets are ignored. If you refer to one or more Positron
issues,
these issues are used to collect information about the feature or
bugfix, such
as the relevant language pack as determined by Github labels of type
`lang: `.
  The note will automatically be tagged with the language.

These notes are typically filled by the Positron team. If you are an
external
  contributor, you may ignore this section.
-->

#### New Features

- N/A

#### Bug Fixes

- Fix data explorer layout when summary is on right


### QA Notes

<!--
Positron team members: please add relevant e2e test tags, so the tests
can be
  run when you open this pull request.

- Instructions:
https://github.com/posit-dev/positron/blob/main/test/e2e/README.md#pull-requests-and-test-tags
- Available tags:
https://github.com/posit-dev/positron/blob/main/test/e2e/infra/test-runner/test-tags.ts
-->


<!--
  Add additional information for QA on how to validate the change,
  paying special attention to the level of risk, adjacent areas that
  could be affected by the change, and any important contextual
  information not present in the linked issues.
-->

@:data-explorer @:web @:win

Author: dhruvisompura

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/dataExplorer.css

@@ -41,9 +41,18 @@
 	grid-template-columns: 100%;
 	grid-row: main-row / end-rows;
 	grid-column: left-column / collapsed-left-spacer;
+}
+
+/* When summary is on left, left column needs space for action bar */
+.data-explorer-panel .data-explorer.summary-on-left .left-column {
 	grid-template-rows: [summary-row-action-bar] 36px [data-grid] 1fr [end-rows];
 }
 
+/* When summary is on left, right column shows main data (no action bar space needed) */
+.data-explorer-panel .data-explorer.summary-on-left .right-column {
+	grid-template-rows: [data-grid] 1fr [end-rows];
+}
+
 .data-explorer-panel .data-explorer .left-column .data-grid-container {
 	/* min-height: 0 allows the data grid to shrink properly when the panel is resized */
 	min-height: 0;
@@ -80,6 +89,23 @@
 	min-width: 0;
 	min-height: 0;
 	display: grid;
+	grid-template-columns: 100%;
 	grid-row: main-row / end-rows;
 	grid-column: right-column / end-columns;
 }
+
+/* When summary is on right, left column shows main data (no action bar space needed) */
+.data-explorer-panel .data-explorer.summary-on-right .left-column {
+	grid-template-rows: [data-grid] 1fr [end-rows];
+}
+
+/* When summary is on right, right column needs space for action bar */
+.data-explorer-panel .data-explorer.summary-on-right .right-column {
+	grid-template-rows: [summary-row-action-bar] 36px [data-grid] 1fr [end-rows];
+}
+
+.data-explorer-panel .data-explorer .right-column .data-grid-container {
+	/* min-height: 0 allows the data grid to shrink properly when the panel is resized */
+	min-height: 0;
+	grid-row: data-grid / end-rows;
+}

src/vs/workbench/browser/positronDataExplorer/components/dataExplorerPanel/components/dataExplorer.tsx

@@ -383,12 +383,14 @@ export const DataExplorer = () => {
 						instance={context.instance.tableSchemaDataGridInstance}
 					/>
 				}
-				<PositronDataGrid
-					instance={layout === PositronDataExplorerLayout.SummaryOnLeft ?
-						context.instance.tableDataDataGridInstance :
-						context.instance.tableSchemaDataGridInstance
-					}
-				/>
+				<div className='data-grid-container'>
+					<PositronDataGrid
+						instance={layout === PositronDataExplorerLayout.SummaryOnLeft ?
+							context.instance.tableDataDataGridInstance :
+							context.instance.tableSchemaDataGridInstance
+						}
+					/>
+				</div>
 			</div>
 		</div >
 	);