From 3bbcd1b51a91faed55a52d819b756301e1dfbf1a Mon Sep 17 00:00:00 2001
From: FadhlanR <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 13:48:05 +0700
Subject: [PATCH 1/3] Ellipsize pill component contents when too large (#1133)

---
 packages/base/field-component.gts          |  5 +++++
 packages/host/app/components/card-pill.gts | 13 ++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 6eca02d93b..031cb297c0 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -94,6 +94,10 @@ export function getBoxComponent(
     };
   }
 
+  function title(cardOrField: BaseDef, format: Format) {
+    return isCard(cardOrField) && format === 'atom' ? cardOrField.title : '';
+  }
+
   let component: TemplateOnlyComponent<{
     Args: { format?: Format; displayContainer?: boolean };
   }> = <template>
@@ -112,6 +116,7 @@ export function getBoxComponent(
             fieldType=field.fieldType
             fieldName=field.name
           }}
+          title={{title model.value f.format}}
           data-test-card-format={{f.format}}
           data-test-field-component-card
           {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index 0743660470..cfcf86e2b9 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -46,7 +46,9 @@ export default class CardPill extends Component<CardPillSignature> {
         </RealmInfoProvider>
       </:icon>
       <:default>
-        <this.component @displayContainer={{false}} />
+        <div class='card-content'>
+          <this.component @displayContainer={{false}} />
+        </div>
         {{#if @removeCard}}
           <IconButton
             class='remove-button'
@@ -86,6 +88,15 @@ export default class CardPill extends Component<CardPillSignature> {
       .is-autoattached {
         border-style: dashed;
       }
+      .card-content {
+        display: flex;
+        max-width: 100px;
+      }
+      :deep(.atom-format) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     </style>
   </template>
 }

From 86f05163bed5576a21b5770b9ad30958703e2367 Mon Sep 17 00:00:00 2001
From: FadhlanR <fridhwanallah@gmail.com>
Date: Sat, 6 Apr 2024 14:14:51 +0700
Subject: [PATCH 2/3] Move title to card pill component (#1147)

---
 packages/base/field-component.gts          | 5 -----
 packages/host/app/components/card-pill.gts | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/base/field-component.gts b/packages/base/field-component.gts
index 031cb297c0..6eca02d93b 100644
--- a/packages/base/field-component.gts
+++ b/packages/base/field-component.gts
@@ -94,10 +94,6 @@ export function getBoxComponent(
     };
   }
 
-  function title(cardOrField: BaseDef, format: Format) {
-    return isCard(cardOrField) && format === 'atom' ? cardOrField.title : '';
-  }
-
   let component: TemplateOnlyComponent<{
     Args: { format?: Format; displayContainer?: boolean };
   }> = <template>
@@ -116,7 +112,6 @@ export function getBoxComponent(
             fieldType=field.fieldType
             fieldName=field.name
           }}
-          title={{title model.value f.format}}
           data-test-card-format={{f.format}}
           data-test-field-component-card
           {{! @glint-ignore  Argument of type 'unknown' is not assignable to parameter of type 'Element'}}
diff --git a/packages/host/app/components/card-pill.gts b/packages/host/app/components/card-pill.gts
index cfcf86e2b9..8c44fedc46 100644
--- a/packages/host/app/components/card-pill.gts
+++ b/packages/host/app/components/card-pill.gts
@@ -46,7 +46,7 @@ export default class CardPill extends Component<CardPillSignature> {
         </RealmInfoProvider>
       </:icon>
       <:default>
-        <div class='card-content'>
+        <div class='card-content' title={{@card.title}}>
           <this.component @displayContainer={{false}} />
         </div>
         {{#if @removeCard}}

From 789e59dfe74c3455e71284538eac9812a3b8fa4d Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Mon, 8 Apr 2024 14:46:01 +0800
Subject: [PATCH 3/3] Fix: when moving from 2 panel to 3 panel the left panel
 gets larger than expected (#1148)

* onContainerResize shouldnt be called during unregister. It morphs the ratios

* defaultLengthFraction should sum to 1. Not necessarily as an api -- just a fix
---
 .../src/components/resizable-panel-group/index.gts  |  1 -
 .../app/components/operator-mode/code-submode.gts   | 13 +++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
index a9def6f6fc..e2d160c058 100644
--- a/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
+++ b/packages/boxel-ui/addon/src/components/resizable-panel-group/index.gts
@@ -237,7 +237,6 @@ export default class ResizablePanelGroup extends Component<Signature> {
   unregisterPanel(id: number) {
     this.listPanelContext.delete(id);
     this.calculatePanelRatio();
-    this.onContainerResize();
   }
 
   calculatePanelRatio() {
diff --git a/packages/host/app/components/operator-mode/code-submode.gts b/packages/host/app/components/operator-mode/code-submode.gts
index 7ae441118c..ec6f348ca7 100644
--- a/packages/host/app/components/operator-mode/code-submode.gts
+++ b/packages/host/app/components/operator-mode/code-submode.gts
@@ -89,14 +89,15 @@ type PanelHeights = {
 type SelectedAccordionItem = 'schema-editor' | null;
 
 const CodeModePanelWidths = 'code-mode-panel-widths';
+const defaultLeftPanelWidth =
+  (14.0 * parseFloat(getComputedStyle(document.documentElement).fontSize)) /
+  (document.documentElement.clientWidth - 40 - 36);
 const defaultPanelWidths: PanelWidths = {
   // 14rem as a fraction of the layout width
-  leftPanel:
-    (14.0 * parseFloat(getComputedStyle(document.documentElement).fontSize)) /
-    (document.documentElement.clientWidth - 40 - 36),
-  codeEditorPanel: 0.4,
-  rightPanel: 0.4,
-  emptyCodeModePanel: 0.8,
+  leftPanel: defaultLeftPanelWidth,
+  codeEditorPanel: (1 - defaultLeftPanelWidth) / 2,
+  rightPanel: (1 - defaultLeftPanelWidth) / 2,
+  emptyCodeModePanel: 1 - defaultLeftPanelWidth,
 };
 
 const CodeModePanelHeights = 'code-mode-panel-heights';