layout fix

Author: Aniket-Engg

apps/remix-ide/src/app/panels/layout.ts

@@ -6,7 +6,7 @@ import { QueryParams } from '@remix-project/remix-lib'
 const profile: Profile = {
   name: 'layout',
   description: 'layout',
-  methods: ['minimize', 'minimizeSidePanel', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal', 'maximiseRightSidePanel', 'resetRightSidePanel']
+  methods: ['minimize', 'minimizeSidePanel', 'maximiseSidePanel', 'resetSidePanel', 'maximizeTerminal', 'maximiseRightSidePanel', 'resetRightSidePanel', 'triggerChange']
 }
 
 interface panelState {
@@ -194,4 +194,9 @@ export class Layout extends Plugin {
     this.enhanced[current] = false
     this.event.emit('resetRightSidePanel')
   }
+
+  triggerChange () {
+    this.event.emit('change', this.panels)
+    this.emit('change', this.panels)
+  }
 }

apps/remix-ide/src/app/panels/terminal.tsx

@@ -127,12 +127,16 @@ export default class Terminal extends Plugin {
     this.on('debugger', 'debuggingStarted', (data: any) => {
       this.isDebugging = true
       this.renderComponent()
+      // Trigger layout change to update terminal height
+      this.call('layout', 'triggerChange')
     })
 
     this.on('debugger', 'debuggingStopped', () => {
       this.isDebugging = false
       this.debuggerCallStack = []
       this.renderComponent()
+      // Trigger layout change to reset terminal height
+      this.call('layout', 'triggerChange')
     })
 
     // Listen for file changes - auto-restore terminal panel if maximized when main panel is used

libs/remix-ui/debugger-ui/src/lib/debug-layout/debug-layout.css

@@ -19,15 +19,15 @@
 .debug-section-trace {
   flex-shrink: 0;
   max-height: 33.33%;
-  min-height: 200px;
+  min-height: 300px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
 
 .debug-section-object {
   flex: 1;
-  min-height: 400px;
+  min-height: 300px;
   display: flex;
   flex-direction: column;
   overflow: hidden;

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -27,11 +27,13 @@ const RemixUIMainPanel = (props: RemixUIMainPanelProps) => {
     if (layout.panels) {
       const pluginPanels: PluginRecord[] = []
       Object.values(layout.panels).map((panel: any) => {
+        // Check if terminal is debugging by accessing the plugin's isDebugging property
+        const isTerminalDebugging = panel.plugin.profile.name === 'terminal' && panel.plugin.isDebugging
         pluginPanels.push({
           profile: panel.plugin.profile,
           active: panel.active,
           view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
-          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized ' : ' ') + ((platform === appPlatformTypes.desktop)? 'desktop' : ''),
+          class: panel.plugin.profile.name + '-wrap ' + (panel.minimized ? 'minimized ' : ' ') + ((platform === appPlatformTypes.desktop)? 'desktop' : '') + (isTerminalDebugging ? ' debugging' : ''),
           minimized: panel.minimized,
           pinned: panel.pinned
         })

libs/remix-ui/panel/src/lib/plugins/panel.css

@@ -131,6 +131,10 @@ iframe {
     height: 20%;
 }
 
+.terminal-wrap.debugging {
+    height: 31%;
+}
+
 .terminal-wrap.maximized {
     height: 100% !important;
     flex: 1;