commit initial 09-12-2025 41

src/App.css

@@ -2,13 +2,21 @@
    Global & Base
 ============================ */
 
-* {
-  box-sizing: border-box;
+html, body, #root {
+  height: 100%;
+  width: 100%;
   margin: 0;
   padding: 0;
+  overflow-x: hidden; /* prevent page-level horizontal scroll */
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
-/* Optional: CRA root */
 .App {
   text-align: center;
 }
@@ -21,6 +29,7 @@
   flex-direction: column;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   overflow: hidden;
+  max-width: 100%;
 }
 
 /* Themes */
@@ -48,6 +57,7 @@
   color: #eee;
   font-size: 13px;
   border-bottom: 1px solid #444;
+  flex: 0 0 auto;
 }
 
 .ide-menubar-left,
@@ -84,7 +94,9 @@
 .ide-body {
   flex: 1;
   display: flex;
-  overflow: hidden;
+  overflow: hidden;    /* prevent children from creating page overflow */
+  min-height: 0;       /* allow children to shrink (important for flex) */
+  max-width: 100%;
 }
 
 /* ============================
@@ -92,6 +104,8 @@
 ============================ */
 
 .ide-sidebar {
+  flex: 0 0 210px;     /* fixed sidebar width */
+  min-width: 0;        /* critical for preventing overflow from child */
   width: 210px;
   background: #252526;
   color: #ccc;
@@ -106,6 +120,9 @@
   cursor: pointer;
   user-select: none;
   border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tree-item:hover {
@@ -117,17 +134,20 @@
 ============================ */
 
 .ide-main {
-  flex: 1;
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   position: relative;
-  min-width: 0;
+  min-width: 0;           /* CRITICAL: allow editor to shrink inside flex */
+  overflow: hidden;
 }
 
 /* Monaco wrapper */
 .ide-editor-wrapper {
-  flex: 1;
+  flex: 1 1 auto;
   min-height: 0;
+  min-width: 0;           /* important for monaco inside flex */
+  overflow: hidden;
 }
 
 /* Bottom panels (output, stdin, problems) */
@@ -137,7 +157,10 @@
   padding: 6px;
   font-size: 13px;
   height: 28%;
-  overflow-y: auto;
+  overflow: auto;
+  min-height: 120px;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 
 .ide-output {
@@ -150,28 +173,61 @@
   border-radius: 4px;
   font-family: "Consolas", monospace;
   font-size: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .ide-input-box {
   width: 100%;
   margin-top: 4px;
-  padding: 4px;
+  padding: 6px;
   background: #111;
   border: 1px solid #444;
   color: #eee;
   border-radius: 3px;
   font-size: 12px;
+  box-sizing: border-box;
 }
 
 /* Problems panel */
 .ide-problems-panel {
   margin-top: 6px;
-  padding: 4px;
+  padding: 8px;
   background: #3c0000;
   color: #fff;
   border-left: 3px solid red;
   font-size: 12px;
   border-radius: 3px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* ============================
+   Terminal / XTerm container
+============================ */
+
+/* Ensure terminal fits container and doesn't push layout */
+#terminal-container {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+  overflow-x: auto; /* keep horizontal scroll inside terminal only */
+  height: 180px;
+  background: #1e1e1e;
+  border-top: 1px solid #333;
+  border-radius: 4px;
+}
+
+/* Terminal content wrapper (if you have a wrapper class) */
+.terminal-content {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: "Consolas", monospace;
 }
 
 /* ============================
@@ -179,6 +235,8 @@
 ============================ */
 
 .ide-right-panel {
+  flex: 0 0 280px;
+  min-width: 0;
   width: 280px;
   border-left: 1px solid #444;
   background: #252526;
@@ -187,6 +245,7 @@
   flex-direction: column;
   gap: 8px;
   font-size: 13px;
+  overflow: auto;
 }
 
 .ide-ai-header {
@@ -220,6 +279,7 @@
   color: #eee;
   font-family: Consolas, monospace;
   font-size: 12px;
+  box-sizing: border-box;
 }
 
 /* AI buttons */
@@ -230,7 +290,7 @@
 
 .ide-ai-buttons button {
   flex: 1;
-  padding: 4px 6px;
+  padding: 6px;
   font-size: 12px;
   border-radius: 4px;
   border: 1px solid #555;
@@ -271,7 +331,9 @@
   padding: 4px;
   animation: fadeIn 0.25s ease-in-out;
   font-size: 12px;
-  z-index: 20;
+  z-index: 200; /* ensure it sits above other UI */
+  max-width: calc(100vw - 24px);
+  box-sizing: border-box;
 }
 
 .ai-suggest {
@@ -295,7 +357,9 @@
   padding: 10px;
   border: 1px solid #444;
   border-radius: 5px;
-  z-index: 30;
+  z-index: 300;
+  max-width: calc(100vw - 24px);
+  box-sizing: border-box;
 }
 
 .search-dialog input {
@@ -318,7 +382,9 @@
   border: 1px solid #555;
   border-radius: 5px;
   padding: 4px;
-  z-index: 40;
+  z-index: 400;
+  max-width: calc(100vw - 24px);
+  box-sizing: border-box;
 }
 
 .ide-context-menu div {
@@ -332,83 +398,9 @@
 }
 
 /* ============================
-   Animations
+   Progress / Spinner
 ============================ */
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(5px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ============================
-   📱 Mobile / Tablet Responsive
-============================ */
-
-@media (max-width: 768px) {
-  /* Stack everything vertically */
-  .ide-body {
-    flex-direction: column;
-  }
-
-  /* Sidebar: full width at top */
-  .ide-sidebar {
-    width: 100%;
-    max-height: 24vh;
-    border-right: none;
-    border-bottom: 1px solid #444;
-  }
-
-  /* Main editor: comes after sidebar */
-  .ide-main {
-    order: 2;
-  }
-
-  .ide-editor-wrapper {
-    height: 40vh;
-  }
-
-  /* Output panel: keep compact */
-  .ide-panels {
-    height: auto;
-    max-height: 26vh;
-  }
-
-  /* Right AI panel: full width at bottom */
-  .ide-right-panel {
-    width: 100%;
-    order: 3;
-    border-left: none;
-    border-top: 1px solid #444;
-  }
-
-  /* Search dialog: more width */
-  .search-dialog {
-    right: 8px;
-    left: 8px;
-    width: auto;
-  }
-
-  /* Context menu: keep inside viewport */
-  .ide-context-menu {
-    max-width: 70vw;
-  }
-
-  /* AI popup: center-ish on mobile */
-  .ai-popup {
-    right: 8px;
-    left: 8px;
-    width: auto;
-  }
-}
-
-
-/* ---------- progress bar under menubar ---------- */
 .ide-progress-wrap {
   height: 3px;
   background: transparent;
@@ -449,3 +441,64 @@
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+/* ============================
+   Misc: Text wrapping & safety
+============================ */
+
+.ide-output, .ide-explain, .ide-problems-panel, .tree-item, .ai-popup, .ai-suggest {
+  overflow-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+
+/* Buttons, inputs, selects must not exceed container */
+button, input, textarea, select {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* Final safety: hide any stray horizontal overflow */
+#root, .ide-root, .ide-body, .ide-main { overflow-x: hidden; }
+
+/* ============================
+   📱 Mobile / Tablet Responsive
+============================ */
+
+@media (max-width: 900px) {
+  /* Stack layout vertically on small screens */
+  .ide-body { flex-direction: column; }
+
+  /* Sidebar becomes top strip */
+  .ide-sidebar {
+    width: 100%;
+    flex: 0 0 auto;
+    max-height: 22vh;
+    border-right: none;
+    border-bottom: 1px solid #444;
+  }
+
+  .ide-main { order: 2; min-height: 40vh; }
+  .ide-editor-wrapper { height: 40vh; }
+
+  /* Bottom panels adapt */
+  .ide-panels { height: auto; max-height: 26vh; }
+
+  /* Right panel becomes bottom full width */
+  .ide-right-panel {
+    width: 100%;
+    order: 3;
+    border-left: none;
+    border-top: 1px solid #444;
+  }
+
+  .ai-popup { right: 8px; left: 8px; width: auto; max-width: calc(100vw - 16px); }
+  .search-dialog { right: 8px; left: 8px; width: auto; }
+  .ide-context-menu { max-width: 70vw; }
+}
+
+/* Small-screen tweak for very small devices */
+@media (max-width: 420px) {
+  .ide-menubar { font-size: 12px; padding: 0 6px; }
+  .ide-ai-buttons button, .ide-menubar button { padding: 4px; font-size: 12px; }
+}