Repository: jupytercad/JupyterCAD (language: python)

Issue:
Toolbar Not Fully Accessible When JupyterCad Editor Width Is Reduced
When the JupyterCad editor's width is reduced beyond a certain point, the toolbar becomes partially inaccessible, making it difficult to use essential buttons. This issue impacts user experience, particularly when working in smaller screen resolutions or when the editor is resized.


Discussion / hints:

Fix patch:
diff --git a/packages/base/src/toolbar/widget.tsx b/packages/base/src/toolbar/widget.tsx
index 80a985f2..67ac6c70 100644
--- a/packages/base/src/toolbar/widget.tsx
+++ b/packages/base/src/toolbar/widget.tsx
@@ -4,6 +4,7 @@ import {
   ReactWidget,
   redoIcon,
   Toolbar,
+  ReactiveToolbar,
   undoIcon,
   terminalIcon
 } from '@jupyterlab/ui-components';
@@ -26,9 +27,9 @@ export class Separator extends Widget {
   }
 }
 
-export class ToolbarWidget extends Toolbar {
+export class ToolbarWidget extends ReactiveToolbar {
   constructor(options: ToolbarWidget.IOptions) {
-    super(options);
+    super();
     this.addClass('jpcad-toolbar-widget');
     setTimeout(() => {
       // Allow the widget tracker to propagate the new widget signal.
@@ -231,7 +232,7 @@ export class ToolbarWidget extends Toolbar {
             })
           );
         });
-        this.addItem('spacer', Toolbar.createSpacerItem());
+        this.addItem('spacer', ReactiveToolbar.createSpacerItem());
 
         // Users
         this.addItem(


Test patch:
diff --git a/ui-tests/tests/ui.spec.ts b/ui-tests/tests/ui.spec.ts
index 23a84841..a6973a88 100644
--- a/ui-tests/tests/ui.spec.ts
+++ b/ui-tests/tests/ui.spec.ts
@@ -359,6 +359,7 @@ test.describe('UI Test', () => {
     test('should open console', async ({ page }) => {
       await page.goto();
       await page.getByLabel('notebook content').getByText('CAD File').click();
+      await page.getByRole('button', { name: 'More commands' }).click();
       await page.getByRole('button', { name: 'Toggle console' }).click();
       await page.getByRole('button', { name: 'Remove console' });
       await page.getByRole('textbox').nth(1).click();
diff --git a/ui-tests/tests/ui.spec.ts-snapshots/JCAD-Console-linux.png b/ui-tests/tests/ui.spec.ts-snapshots/JCAD-Console-linux.png
index 2ed3fdc4..044e5dec 100644
Binary files a/ui-tests/tests/ui.spec.ts-snapshots/JCAD-Console-linux.png and b/ui-tests/tests/ui.spec.ts-snapshots/JCAD-Console-linux.png differ