@ibgib/space-gib 0.0.34 → 0.0.35

package/dist/client/css/activity-bar.css

@@ -290,18 +290,36 @@
 
 /* Left Panel Views (New User POV) */
 .space-side-view {
-    display: flex;
+    display: none;
     flex-direction: column;
     height: 100%;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+/* Force flex column whenever the side-view is visible, overriding any inline display: block */
+.space-side-view:not([style*="display: none"]):not([style*="display:none"]),
+.space-side-view.active {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.space-side-view[style*="display: none"],
+.space-side-view[style*="display:none"] {
+    display: none !important;
 }
 
 .side-view-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.65rem 0.5rem 0.85rem;
+    padding: 0.35rem 0.5rem 0.4rem;
     border-bottom: 1px solid var(--clr-border);
-    margin-bottom: 1rem;
+    margin-bottom: 0.35rem;
+    flex: 0 0 auto !important;
+    flex-shrink: 0 !important;
 }
 
 .side-view-title {

package/dist/client/css/layout.css

@@ -204,6 +204,10 @@
 .left-panel {
     width: var(--left-panel-width);
     border-right: 1px solid var(--clr-border);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
 }
 
 .left-panel.collapsed {
@@ -227,6 +231,27 @@
     min-width: 150px;
     height: 100%;
     overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.left-panel-content {
+    padding: 0.35rem 0.5rem 0.5rem !important;
+    overflow: hidden !important;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.left-panel-content > .space-side-view:not([style*="display: none"]):not([style*="display:none"]),
+.left-panel-content > .space-side-view.active {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    flex: 1 1 0px !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
 }
 
 .placeholder-text {
@@ -586,7 +611,7 @@ space-gib-cosmos-navigator {
     overflow: visible !important;
 }
 
-/* ── Code Space File Explorer & Timeline Containers (Zero vertical margin) ── */
+/* ── Code Space File Explorer & Timeline Containers ── */
 .code-file-explorer-container {
     width: 100%;
     display: flex;
@@ -594,8 +619,17 @@ space-gib-cosmos-navigator {
     margin: 0 !important;
     padding: 0 !important;
     gap: 0 !important;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
+    position: relative;
+    z-index: 30;
+    flex: 1 1 0px;
+    min-height: 76px;
+}
+
+.code-file-explorer-container:has(space-gib-file-explorer[collapsed]) {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
 }
 
 .code-file-explorer-container space-gib-file-explorer,
@@ -603,6 +637,39 @@ space-gib-file-explorer {
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
+    height: 100%;
+    min-height: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.code-changes-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    padding: 0 !important;
+    gap: 0 !important;
+    overflow: hidden;
+    position: relative;
+    z-index: 20;
+    flex: 1 1 0px;
+    min-height: 32px;
+}
+
+.code-changes-container:has(space-gib-changes[collapsed]) {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+}
+
+.code-changes-container space-gib-changes,
+space-gib-changes {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    height: 100%;
+    min-height: 0;
     margin: 0 !important;
     padding: 0 !important;
 }
@@ -614,8 +681,17 @@ space-gib-file-explorer {
     margin: 0 !important;
     padding: 0 !important;
     gap: 0 !important;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
+    position: relative;
+    z-index: 10;
+    flex: 1 1 0px;
+    min-height: 32px;
+}
+
+.code-timeline-container:has(space-gib-timeline[collapsed]) {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
 }
 
 .code-timeline-container space-gib-timeline,
@@ -623,10 +699,55 @@ space-gib-timeline {
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
+    height: 100%;
+    min-height: 0;
     margin: 0 !important;
     padding: 0 !important;
 }
 
+/* ── Accordion Horizontal Resizers ── */
+.accordion-resizer {
+    height: 6px;
+    background: transparent;
+    cursor: row-resize;
+    position: relative;
+    z-index: 25;
+    flex: 0 0 6px;
+    margin: 1px 0;
+    transition: background 0.15s ease;
+}
+
+.accordion-resizer::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: 0;
+    right: 0;
+    z-index: 26;
+}
+
+.accordion-resizer:hover,
+.accordion-resizer.active {
+    background: var(--clr-accent, #78f87e);
+}
+
+.code-file-explorer-container:has(space-gib-file-explorer[collapsed]) + #resizer-explorer-changes {
+    display: none !important;
+}
+
+#resizer-explorer-changes:has(+ .code-changes-container:has(space-gib-changes[collapsed])) {
+    display: none !important;
+}
+
+.code-changes-container:has(space-gib-changes[collapsed]) + #resizer-changes-timeline {
+    display: none !important;
+}
+
+#resizer-changes-timeline:has(+ .code-timeline-container:has(space-gib-timeline[collapsed])) {
+    display: none !important;
+}
+
 /* ── Right Panel & Chat View Container ── */
 .right-panel-content {
     padding: 0 !important;

package/dist/client/index.html

@@ -233,6 +233,12 @@
 
             <!-- File Explorer Container (Web Component injected dynamically) -->
             <div id="code-file-explorer-container" class="code-file-explorer-container"></div>
+            <!-- Resizer between Explorer and Changes -->
+            <div id="resizer-explorer-changes" class="accordion-resizer" title="Drag to resize, double-click to reset"></div>
+            <!-- Changes / Staging Accordion Container (Web Component injected dynamically) -->
+            <div id="code-changes-container" class="code-changes-container"></div>
+            <!-- Resizer between Changes and Timeline -->
+            <div id="resizer-changes-timeline" class="accordion-resizer" title="Drag to resize, double-click to reset"></div>
             <!-- Timeline Container (Web Component injected dynamically) -->
             <div id="code-timeline-container" class="code-timeline-container"></div>
           </div>