Merge pull request #85 from AnuKritiW/fix/responsive-layout-resize

Responsive Layout Implementation

Author: AnuKritiW

src/components/EditorPanel.vue

@@ -17,9 +17,10 @@
       :value="localCode"
       @change="onCodeChange"
       @mount="onEditorMount"
-      style="height: 100%; width: 100%;"
+      style="flex: 1; min-height: 0;"
       :options="editorOptions"
     />
+    <!-- flex 1 above ensures editor takes space within the container while still respecting footer element-->
     <template #footer>
       <n-button @click="runShader" block>Run Shader</n-button>
     </template>
@@ -145,7 +146,42 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+.panel {
+  background-color: #1a1a1a;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
 .editor {
-  grid-row: 1 / span 2; /* Span both rows */
+  grid-row: 1;
+  grid-column: 1;
+}
+
+/* Ensure the card structure maintains proper layout */
+.editor :deep(.n-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.editor :deep(.n-card__content) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow Monaco to shrink */
+  overflow: hidden;
+}
+
+/* Footer should never shrink; we need Run Shader button to always be visible */
+.editor :deep(.n-card__footer) {
+  flex-shrink: 0;
+}
+
+/* Monaco Editor container should flex within the card content */
+.editor :deep(.monaco-editor) {
+  flex: 1;
+  min-height: 0;
 }
 </style>

src/components/ResourcesPanel.vue

@@ -54,6 +54,7 @@ const showMeshModalProxy = computed({
     size="small"
     embedded
     class="resources-card"
+    style="grid-row: 2; grid-column: 1;"
   >
     <n-tabs type="segment" animated>
       <n-tab-pane name="textures" tab="Textures">
@@ -80,7 +81,7 @@ const showMeshModalProxy = computed({
       </n-tab-pane>
 
       <n-tab-pane name="mesh" tab="Mesh">
-        <div style="display:inline-flex; align-items:center; gap:8px; margin-top:8px;">
+        <div class="mesh-buttons-row">
           <n-button @click="$emit('openMeshModal')">Select / Upload .OBJ Mesh</n-button>
           <n-button
             :disabled="!uploadedMesh.name"
@@ -92,7 +93,7 @@ const showMeshModalProxy = computed({
           </n-button>
         </div>
 
-        <div style="margin-top:12px; display: flex; align-items: center; gap: 12px;">
+        <div class="mesh-actions-row">
           <n-button ghost size="small" @click="$emit('copyStarterCode')" :render-icon="renderClipboardIcon">
             Copy Starter Shader
           </n-button>
@@ -116,3 +117,56 @@ const showMeshModalProxy = computed({
     />
   </n-card>
 </template>
+
+<style scoped>
+.resources-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.resources-card :deep(.n-card) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.resources-card :deep(.n-card__content) {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Responsive mesh buttons */
+.mesh-buttons-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.mesh-buttons-row .n-button {
+  flex: 0 1 auto; /* don't grow, but can shrink */
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mesh-actions-row {
+  margin-top: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.mesh-actions-row .n-button {
+  flex: 0 1 auto; /* don't grow, but can shrink */
+  min-width: 0;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

src/styles/app.css

@@ -2,6 +2,7 @@ html, body, #app, .n-layout {
   margin: 0;
   padding: 0;
   height: 100%;
+  background-color: #101014; /* Ensure dark background extends beyond viewport */
 }
 
 /* Root grid with two rows: header + panels */
@@ -13,26 +14,39 @@ html, body, #app, .n-layout {
 
 .grid-container {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 3fr 1fr;
+  /* grid-template-columns: 1fr 1fr; */
+  /* grid-template-rows: 3fr 1fr; */
+  grid-template-columns: minmax(300px, 1fr) minmax(100px, 1fr);
+  grid-template-rows: minmax(175px, 3fr) minmax(210px, 1fr);
   gap: 12px;
   padding: 12px;
   background-color: #101014;
   box-sizing: border-box;
   height: 100%; /* fill the minmax row */
+  min-height: 0; /* Allow grid items to shrink below their content size */
+}
+
+/* Ensure all grid items have proper height constraints */
+/* >* is a CSS child combinator selector. i.e. all direct children are selected */
+.grid-container > * {
+  min-height: 0;
+  height: 100%;
 }
 
 /* Container for texture buttons inside 'Textures' tab */
 .texture-buttons {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   gap: 8px;
   padding: 8px;
 }
 
 /* Base button layout: sizing and appearance */
 .texture-buttons .n-button {
-  flex: 1;
+  flex: 1 1 0;                /* Equal flex basis ensures uniform sizing */
+  min-width: 80px;
+  max-width: calc(25% - 6px); /* Never exceed 1/4 of container width minus gap adjustment */
   aspect-ratio: 1 / .4;       /* Makes them square */
   height: auto;               /* Let height be defined by width via aspect ratio */
   padding: 0;                 /* Removes inner padding for tighter fit */

src/webgpu/renderer.ts

@@ -6,13 +6,20 @@ import { createUniforms } from './uniforms';
 import { createPipeline } from './pipeline';
 
 let currentFrameId: number | null = null;
+let currentCleanup: (() => void) | null = null;
 
 // Cancel any active render loop
 export function cancelCurrentRenderLoop() {
   if (currentFrameId !== null) {
     cancelAnimationFrame(currentFrameId);
     currentFrameId = null;
   }
+
+  // ensure ResizeObserver is disconnected before a new one is started
+  if (currentCleanup) {
+    currentCleanup();
+    currentCleanup = null;
+  }
 }
 
 function runRenderPass(
@@ -102,8 +109,23 @@ export async function initWebGPU(
 
     const { context, format } = configureCanvasContext(canvas, device);
 
-    canvas.width = canvas.clientWidth * window.devicePixelRatio;
-    canvas.height = canvas.clientHeight * window.devicePixelRatio;
+    // Set initial canvas size with device pixel ratio
+    const updateCanvasSize = () => {
+      const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1; // fallback to 1 for tests
+      canvas.width = canvas.clientWidth * dpr;
+      canvas.height = canvas.clientHeight * dpr;
+    };
+
+    updateCanvasSize();
+
+    // Add resize observer for responsive canvas resizing (only in browser environment)
+    let cleanup: (() => void) | null = null;
+    if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+      const resizeObserver = new ResizeObserver(updateCanvasSize);
+      resizeObserver.observe(canvas);
+      cleanup = () => resizeObserver.disconnect();
+      currentCleanup = cleanup;
+    }
 
     const mouse = { x: 0, y: 0, down: false };