Remove unused CSS

src/index.ts

@@ -314,6 +314,7 @@ const variables: JupyterFrontEndPlugin<void> = {
             title
           })
         });
+        widget.addClass('jp-DebuggerVariables');
         widget.id = id;
         void tracker.add(widget);
 

src/variables/grid.ts

@@ -34,12 +34,12 @@ export class VariablesBodyGrid extends Panel {
     super();
     const { model, commands } = options;
     this._grid = new VariablesGrid({ commands });
+    this._grid.addClass('jp-DebuggerVariables-grid');
     this._model = model;
     const updated = (model: VariablesModel) => {
       this._grid.dataModel.setData(model.scopes);
     };
     this._model.changed.connect(updated, this);
-    this.node.style.height = '100%';
     this.addWidget(this._grid);
     this.addClass('jp-DebuggerVariables-body');
   }
@@ -95,7 +95,6 @@ export class VariablesGrid extends Panel {
     );
     grid.stretchLastColumn = true;
     grid.node.style.height = '100%';
-    this.node.style.height = '100%';
     this._grid = grid;
     this.addWidget(grid);
   }
@@ -148,13 +147,12 @@ export class VariableDetailsGrid extends Panel {
     this.title.icon = variableIcon;
     this.title.label = `${service.session?.connection?.name} - details of ${title}`;
     this._grid = new VariablesGrid({ commands });
+    this._grid.addClass('jp-DebuggerVariables-grid');
     const detailsScope = {
       name: title,
       variables: details
     };
     this._grid.dataModel.setData([detailsScope]);
-    this.node.style.height = '100%';
-
     this.addWidget(this._grid);
     this.addClass('jp-DebuggerVariableDetails');
   }

style/variables.css

@@ -3,7 +3,15 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+.jp-DebuggerVariables {
+  display: flex;
+  flex-direction: column;
+}
+
 .jp-DebuggerVariables-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
   min-height: 24px;
   overflow: auto;
 }
@@ -33,70 +41,13 @@
 }
 
 .jp-DebuggerVariableDetails {
+  display: flex;
+  flex-direction: column;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   overflow: auto;
 }
 
-.jp-DebuggerVariableDetails table,
-.jp-DebuggerVariables-body table {
-  width: 100%;
-  border-spacing: 0px;
-}
-
-.jp-DebuggerVariableDetails table tbody,
-.jp-DebuggerVariableDetails table thead,
-.jp-DebuggerVariables-body table tbody,
-.jp-DebuggerVariables-body table thead {
-  background: var(--jp-layout-color2);
-  text-align: left;
-}
-
-.jp-DebuggerVariableDetails table tbody tr:nth-child(2n + 1),
-.jp-DebuggerVariables-body table tbody tr:nth-child(2n + 1) {
-  background-color: var(--jp-layout-color1);
-}
-
-.jp-DebuggerVariableDetails table tbody td,
-.jp-DebuggerVariableDetails table thead th,
-.jp-DebuggerVariables-body table tbody td,
-.jp-DebuggerVariables-body table thead th {
-  padding: 5px;
-  border-right: 1px solid var(--jp-layout-color3);
-}
-
-.jp-DebuggerVariableDetails table tbody td:last-child,
-.jp-DebuggerVariableDetails table thead th:last-child,
-.jp-DebuggerVariables-body table tbody td:last-child,
-.jp-DebuggerVariables-body table thead th:last-child {
-  border-right: none;
-}
-
-.jp-DebuggerVariableDetails table tbody td.selected,
-.jp-DebuggerVariables-body table tbody td.selected {
-  color: white;
-  background: var(--jp-brand-color1);
-}
-
-.jp-detailsVariable-box {
-  position: fixed;
-  top: 30vh;
-  left: 20vw;
-  right: 0vw;
-  width: 500px;
-  z-index: 1253;
-  background-color: white;
-  text-align: center;
-  border: 1px solid #c1c1c1;
-}
-
-.jp-detailsVariable-box #header {
-  cursor: grab;
-  font-weight: bold;
-  background-color: #c1c1c1;
-}
-
-.jp-detailsVariable-box > button {
-  margin-bottom: 10px;
-  margin-top: 10px;
+.jp-DebuggerVariables-grid {
+  flex: 1 1 auto;
 }