From 6feb97aeaa958fdab3917125454c426529969768 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burieberry@users.noreply.github.com>
Date: Tue, 5 Nov 2024 15:34:12 -0500
Subject: [PATCH] Fix stack item container scroll and style bugs (#1758)

* fix styling bugs

* add snapshot for special styling

* lint fix

* move utility to utilities layer
---
 .../src/components/card-header/index.gts      |  6 +-
 packages/boxel-ui/addon/src/styles/global.css |  7 +-
 .../components/operator-mode/stack-item.gts   | 78 +++++++++----------
 .../operator-mode-acceptance-test.gts         | 39 ++++++++++
 4 files changed, 85 insertions(+), 45 deletions(-)

diff --git a/packages/boxel-ui/addon/src/components/card-header/index.gts b/packages/boxel-ui/addon/src/components/card-header/index.gts
index 76b44c2b73..b1fb003e6d 100644
--- a/packages/boxel-ui/addon/src/components/card-header/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-header/index.gts
@@ -93,7 +93,7 @@ export default class CardHeader extends Component<Signature> {
             {{#if @isSaving}}
               Saving…
             {{else if (bool @lastSavedMessage)}}
-              <div data-test-last-saved>
+              <div class='boxel-contents-only' data-test-last-saved>
                 {{@lastSavedMessage}}
               </div>
             {{/if}}
@@ -256,8 +256,8 @@ export default class CardHeader extends Component<Signature> {
           margin-bottom: calc(1rem - var(--boxel-font-size-sm));
         }
         .save-indicator {
-          font-weight: normal;
-          line-height: 1.1;
+          font: var(--boxel-font-xs);
+          letter-spacing: var(--boxel-lsp-sm);
         }
         .realm-icon-container {
           display: flex;
diff --git a/packages/boxel-ui/addon/src/styles/global.css b/packages/boxel-ui/addon/src/styles/global.css
index 4470e12aaa..cefc0c9317 100644
--- a/packages/boxel-ui/addon/src/styles/global.css
+++ b/packages/boxel-ui/addon/src/styles/global.css
@@ -86,6 +86,10 @@
 }
 
 @layer utilities {
+  .boxel-contents-only {
+    display: contents;
+  }
+
   /* Hides content visually only
   (accessible via screen readers) */
   .boxel-sr-only:not(:focus):not(:active) {
@@ -102,6 +106,7 @@
   }
 }
 
-#ember-basic-dropdown-wormhole .boxel-dropdown__content.ember-basic-dropdown-content {
+#ember-basic-dropdown-wormhole
+  .boxel-dropdown__content.ember-basic-dropdown-content {
   z-index: calc(var(--boxel-layer-modal-urgent) + 1);
 }
diff --git a/packages/host/app/components/operator-mode/stack-item.gts b/packages/host/app/components/operator-mode/stack-item.gts
index e0473ff5ee..f231984179 100644
--- a/packages/host/app/components/operator-mode/stack-item.gts
+++ b/packages/host/app/components/operator-mode/stack-item.gts
@@ -33,7 +33,7 @@ import {
   LoadingIndicator,
 } from '@cardstack/boxel-ui/components';
 import { MenuItem, getContrastColor } from '@cardstack/boxel-ui/helpers';
-import { cn, cssVar, optional } from '@cardstack/boxel-ui/helpers';
+import { cssVar, optional } from '@cardstack/boxel-ui/helpers';
 
 import { IconTrash, IconLink } from '@cardstack/boxel-ui/icons';
 
@@ -481,7 +481,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
       {{ContentElement onSetup=this.setupItemEl}}
     >
       <CardContainer
-        class={{cn 'card' edit=this.isEditing}}
+        class='stack-item-card'
         {{ContentElement onSetup=this.setupContainerEl}}
       >
         {{#if this.loadCard.isRunning}}
@@ -503,7 +503,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
               @onEdit={{if this.canEdit (fn @publicAPI.editCard this.card)}}
               @onFinishEditing={{if this.isEditing (perform this.doneEditing)}}
               @onClose={{unless this.isBuried (perform this.closeItem)}}
-              class='header'
+              class='stack-item-header'
               style={{cssVar
                 boxel-card-header-icon-container-min-width=(if
                   this.isBuried '50px' '95px'
@@ -515,6 +515,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
                   @item.headerColor 'transparent'
                 )
               }}
+              role={{if this.isBuried 'button' 'banner'}}
               {{on
                 'click'
                 (optional
@@ -525,11 +526,12 @@ export default class OperatorModeStackItem extends Component<Signature> {
             />
           {{/let}}
           <div
-            class='content'
+            class='stack-item-content'
             {{ContentElement onSetup=this.setupContentEl}}
             data-test-stack-item-content
           >
             <Preview
+              class='stack-item-preview'
               @card={{this.card}}
               @format={{@item.format}}
               @cardContext={{this.cardContext}}
@@ -547,8 +549,6 @@ export default class OperatorModeStackItem extends Component<Signature> {
     <style scoped>
       :global(:root) {
         --stack-card-footer-height: 6rem;
-        --stack-item-header-area-height: 3.375rem;
-        --buried-operator-mode-header-height: 2.5rem;
       }
 
       @keyframes scaleIn {
@@ -572,22 +572,8 @@ export default class OperatorModeStackItem extends Component<Signature> {
         }
       }
 
-      .header {
-        --boxel-card-header-border-radius: var(--boxel-border-radius-xl);
-        --boxel-card-header-background-color: var(--boxel-light);
-        z-index: 1;
-        max-width: max-content;
-        height: fit-content;
-        min-width: 100%;
-        gap: var(--boxel-sp-xxs);
-      }
-
-      .save-indicator {
-        font: var(--boxel-font-xs);
-        opacity: 0.6;
-      }
-
       .item {
+        --stack-item-header-height: 3rem;
         justify-self: center;
         position: absolute;
         width: 89%;
@@ -608,55 +594,65 @@ export default class OperatorModeStackItem extends Component<Signature> {
         animation-duration: 0s;
       }
 
-      .card {
-        border-radius: var(--boxel-border-radius-xl);
+      .item.buried {
+        --stack-item-header-height: 2.5rem;
+      }
+
+      .stack-item-card {
         position: relative;
         height: 100%;
         display: grid;
-        grid-template-rows: var(--stack-item-header-area-height) auto;
+        grid-template-rows: var(--stack-item-header-height) auto;
+        border-radius: var(--boxel-border-radius-xl);
         box-shadow: var(--boxel-deep-box-shadow);
         pointer-events: auto;
+        overflow: hidden;
       }
 
-      .content {
-        overflow: auto;
+      .stack-item-header {
+        --boxel-card-header-padding: var(--boxel-sp-4xs) var(--boxel-sp-xs);
+        --boxel-card-header-background-color: var(--boxel-light);
+        border-radius: 0;
+        z-index: 1;
+        max-width: max-content;
+        height: var(--stack-item-header-height);
+        min-width: 100%;
+        gap: var(--boxel-sp-xxs);
       }
 
-      :global(.content > .boxel-card-container.boundaries) {
-        box-shadow: none;
+      .stack-item-content {
+        overflow: auto;
       }
 
-      .card {
-        overflow: hidden;
+      .stack-item-preview {
+        border-radius: 0;
+        box-shadow: none;
+        overflow: auto;
       }
 
-      .buried .card {
+      .buried > .stack-item-card {
         border-radius: var(--boxel-border-radius-lg);
         background-color: var(--boxel-200);
-        grid-template-rows: var(--buried-operator-mode-header-height) auto;
-      }
-
-      .buried > .card > .content {
-        display: none;
       }
 
-      .buried .header {
-        cursor: pointer;
+      .buried .stack-item-header {
         font: 600 var(--boxel-font-xs);
         gap: var(--boxel-sp-xxxs);
-        --boxel-card-header-padding: var(--boxel-sp-xs);
         --boxel-card-header-text-font: var(--boxel-font-size-xs);
         --boxel-card-header-realm-icon-size: var(--boxel-icon-sm);
-        --boxel-card-header-border-radius: var(--boxel-border-radius-lg);
         --boxel-card-header-card-type-icon-size: var(--boxel-icon-xs);
       }
 
+      .buried .stack-item-content {
+        display: none;
+      }
+
       .loading {
         grid-area: 2;
         display: flex;
         justify-content: center;
         align-items: center;
-        height: calc(100% - var(--stack-item-header-area-height));
+        height: calc(100% - var(--stack-item-header-height));
         padding: var(--boxel-sp);
         color: var(--boxel-dark);
 
diff --git a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts
index a54af73d6a..3f6054af81 100644
--- a/packages/host/tests/acceptance/operator-mode-acceptance-test.gts
+++ b/packages/host/tests/acceptance/operator-mode-acceptance-test.gts
@@ -123,6 +123,7 @@ module('Acceptance | operator mode tests', function (hooks) {
 
     class Pet extends CardDef {
       static displayName = 'Pet';
+      static headerColor = '#355e3b';
       @field name = contains(StringField);
       @field title = contains(StringField, {
         computeVia: function (this: Pet) {
@@ -136,6 +137,26 @@ module('Acceptance | operator mode tests', function (hooks) {
           </h3>
         </template>
       };
+      static isolated = class Isolated extends Component<typeof this> {
+        <template>
+          <div class='pet-isolated'>
+            <h2 data-test-pet-isolated={{@model.name}}>
+              <@fields.name />
+            </h2>
+          </div>
+          <style scoped>
+            .pet-isolated {
+              height: 100%;
+              background-color: #355e3b;
+            }
+            h2 {
+              margin: 0;
+              padding: 20px;
+              color: white;
+            }
+          </style>
+        </template>
+      };
     }
     class ShippingInfo extends FieldDef {
       static displayName = 'Shipping Info';
@@ -466,6 +487,24 @@ module('Acceptance | operator mode tests', function (hooks) {
       ],
       submode: Submodes.Interact,
     });
+
+    await click(`[data-test-cards-grid-item="${testRealmURL}Pet/mango"]`);
+    await percySnapshot(assert); /* snapshot for special styling */
+    assert.operatorModeParametersMatch(currentURL(), {
+      stacks: [
+        [
+          {
+            id: `${testRealmURL}index`,
+            format: 'isolated',
+          },
+          {
+            id: `${testRealmURL}Pet/mango`,
+            format: 'isolated',
+          },
+        ],
+      ],
+      submode: Submodes.Interact,
+    });
   });
 
   test('can access and save settings via profile info popover', async function (assert) {