From 4a84a539120b13c9aae2334eeadec936a907887a Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Wed, 8 Apr 2026 18:51:29 -0400
Subject: [PATCH] remove min-height from host-mode stack-item container

---
 .../src/components/card-container/index.gts   |  3 ++-
 .../src/components/context-button/index.gts   | 10 ++++++++-
 .../boxel-ui/addon/src/styles/variables.css   |  1 +
 .../app/components/host-mode/stack-item.gts   | 22 +++++++++----------
 .../host/app/components/host-mode/stack.gts   |  1 -
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/boxel-ui/addon/src/components/card-container/index.gts b/packages/boxel-ui/addon/src/components/card-container/index.gts
index 3f743f2279d..200d13f4bcf 100644
--- a/packages/boxel-ui/addon/src/components/card-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/card-container/index.gts
@@ -49,7 +49,7 @@ const CardContainer: TemplateOnlyComponent<Signature> = <template>
     :global(.boxel-card-container) {
       position: relative;
       background-color: var(--background, var(--boxel-light));
-      border-radius: var(--radius, var(--boxel-border-radius));
+      border-radius: var(--_boxel-radius);
       color: var(--foreground, var(--boxel-dark));
       transition:
         max-width var(--boxel-transition),
@@ -57,6 +57,7 @@ const CardContainer: TemplateOnlyComponent<Signature> = <template>
       height: 100%;
       width: 100%;
       overflow: hidden;
+      z-index: 0;
     }
     :global(.boxel-card-container--boundaries:not(.hide-boundaries)) {
       box-shadow: 0 0 0 1px var(--border, var(--boxel-border-color));
diff --git a/packages/boxel-ui/addon/src/components/context-button/index.gts b/packages/boxel-ui/addon/src/components/context-button/index.gts
index 59ffeefcba5..f909ef6ae7d 100644
--- a/packages/boxel-ui/addon/src/components/context-button/index.gts
+++ b/packages/boxel-ui/addon/src/components/context-button/index.gts
@@ -14,7 +14,8 @@ export type ContextButtonVariant =
   | 'ghost'
   | 'destructive'
   | 'highlight-icon'
-  | 'destructive-icon'; // 'highlight' is default
+  | 'destructive-icon'
+  | 'primary-dark'; // 'highlight' is default
 
 export const contextButtonVariants: ContextButtonVariant[] = [
   'highlight',
@@ -22,6 +23,7 @@ export const contextButtonVariants: ContextButtonVariant[] = [
   'ghost',
   'destructive',
   'destructive-icon',
+  'primary-dark',
 ];
 
 export type ContextButtonIcon =
@@ -140,6 +142,12 @@ const DropdownButton: TemplateOnlyComponent<Signature> = <template>
         background-color: var(--destructive, var(--boxel-danger));
       }
 
+      .boxel-context-button--primary-dark {
+        color: var(--primary, var(--boxel-highlight));
+        background-color: var(--primary-foreground, var(--boxel-700));
+        border: 1px solid var(--boxel-light-hover-35);
+      }
+
       .boxel-context-button:disabled,
       .boxel-context-button[disabled] {
         color: var(--boxel-400);
diff --git a/packages/boxel-ui/addon/src/styles/variables.css b/packages/boxel-ui/addon/src/styles/variables.css
index 22ab92a776d..715d581b92f 100644
--- a/packages/boxel-ui/addon/src/styles/variables.css
+++ b/packages/boxel-ui/addon/src/styles/variables.css
@@ -192,6 +192,7 @@
   --boxel-dark: #000;
   --boxel-dark-hover: rgba(0, 0, 0, 0.1);
   --boxel-darker-hover: rgba(0, 0, 0, 0.5);
+  --boxel-light-hover-35: rgba(255, 255, 255, 0.35);
 
   --boxel-highlight: var(--boxel-teal);
   --boxel-highlight-hover: var(--boxel-dark-teal);
diff --git a/packages/host/app/components/host-mode/stack-item.gts b/packages/host/app/components/host-mode/stack-item.gts
index 663bee6f557..b80767d31b9 100644
--- a/packages/host/app/components/host-mode/stack-item.gts
+++ b/packages/host/app/components/host-mode/stack-item.gts
@@ -164,6 +164,7 @@ export default class HostModeStackItem extends Component<Signature> {
             <ContextButton
               @icon='close'
               @label='close'
+              @variant='primary-dark'
               {{on 'click' this.handleClose}}
               data-test-host-stack-item-close-button
             />
@@ -211,17 +212,11 @@ export default class HostModeStackItem extends Component<Signature> {
         position: absolute;
         width: 89%;
         height: inherit;
-        padding-top: var(--boxel-sp-xxl);
+        padding-top: var(--boxel-sp-2xl);
         z-index: 0;
         pointer-events: none;
       }
 
-      @media screen {
-        .host-mode-stack-item {
-          min-height: 80cqh;
-        }
-      }
-
       .host-mode-stack-item:not(.buried) {
         padding-bottom: var(--boxel-sp-xxl);
       }
@@ -261,7 +256,7 @@ export default class HostModeStackItem extends Component<Signature> {
 
       .stack-item-card {
         height: 100%;
-        border-radius: var(--boxel-border-radius-xl);
+        border-radius: var(--boxel-border-radius-2xl);
         box-shadow: var(--boxel-deep-box-shadow);
         pointer-events: auto;
         overflow: hidden;
@@ -282,18 +277,21 @@ export default class HostModeStackItem extends Component<Signature> {
         right: var(--boxel-sp-xs);
         z-index: 1;
       }
-      .close-button-container :deep(.boxel-context-button:not(:hover)) {
-        background-color: var(--boxel-100);
-      }
       .close-button-container :deep(.boxel-context-button) {
         box-shadow: var(--boxel-box-shadow);
       }
+      .close-button-container :deep(.boxel-context-button:hover) {
+        box-shadow: var(--boxel-box-shadow-hover);
+      }
 
       .host-mode-stack-item-card {
-        border-radius: 0;
+        border-radius: inherit;
         box-shadow: none;
         z-index: 0;
       }
+      .host-mode-stack-item-card > :deep(.boxel-card-container) {
+        border-radius: inherit;
+      }
 
       @media print {
         .host-mode-stack-item {
diff --git a/packages/host/app/components/host-mode/stack.gts b/packages/host/app/components/host-mode/stack.gts
index 97878ae4965..4b9b0011469 100644
--- a/packages/host/app/components/host-mode/stack.gts
+++ b/packages/host/app/components/host-mode/stack.gts
@@ -80,7 +80,6 @@ export default class HostModeStack extends Component<Signature> {
         /* .inner will handle overflow in host mode stack */
         .host-mode-stack :deep(.host-mode-card, .card) {
           overflow: hidden;
-          min-height: 80cqh;
         }
       }