From 77dbabf35a89e6140fd4308c8551c3c1bf347d4f Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Wed, 15 Jul 2026 13:52:41 -0400
Subject: [PATCH 01/13] Stack default edit format field labels when the card is
 narrow

The default edit template renders top-level fields with FieldContainer's
horizontal layout, which reserves a minmax(8rem, 25%) label column and
leaves little room for inputs in narrow stack items. Make the edit
template an inline-size query container and switch the horizontal
FieldContainers to a stacked label-over-input layout below 400px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../default-templates/isolated-and-edit.gts     | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 89ccae24ed1..5cc2b6da778 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -141,6 +141,23 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       .default-card-template.edit > .notes-footer {
         background-color: var(--muted, var(--boxel-100));
       }
+      .default-card-template.edit {
+        container-name: default-edit-template;
+        container-type: inline-size;
+      }
+      /* stack field labels above their inputs when the template is narrow */
+      @container default-edit-template (width < 400px) {
+        .default-card-template.edit :deep(.boxel-field.horizontal) {
+          grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
+          gap: var(--boxel-sp-4xs);
+          min-height: unset;
+        }
+        .default-card-template.edit
+          :deep(.boxel-field.horizontal > .label-container) {
+          padding-top: 0;
+        }
+      }
       /* this aligns edit fields with containsMany, linksTo, and linksToMany fields */
       .default-card-template.edit
         > :deep(

From c814f4686aab5bb6b42e11c1364eca7f1a51cd18 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Wed, 15 Jul 2026 19:44:03 -0400
Subject: [PATCH 02/13] Rework card-info editor into preview group and
 thumbnail/fields grid

---
 packages/base/default-templates/card-info.gts | 400 ++++++++++--------
 .../default-templates/isolated-and-edit.gts   | 117 ++---
 2 files changed, 286 insertions(+), 231 deletions(-)

diff --git a/packages/base/default-templates/card-info.gts b/packages/base/default-templates/card-info.gts
index d4ddb35e489..8fef0ffad1e 100644
--- a/packages/base/default-templates/card-info.gts
+++ b/packages/base/default-templates/card-info.gts
@@ -131,180 +131,182 @@ interface EditSignature {
 
 class CardInfoEditor extends GlimmerComponent<EditSignature> {
   <template>
-    <div class='cardInfo-editor'>
-      <Button
-        class={{cn 'preview-toggle' is-preview-visible=this.isPreviewVisible}}
-        @size='extra-small'
-        @kind='text-only'
-        {{on 'click' this.togglePreview}}
-        data-test-toggle-preview
-      >
-        {{if this.isPreviewVisible 'Hide' 'Show'}}
-        Default Preview
-        <ChevronRight
-          class='preview-toggle-icon'
-          width='14'
-          height='14'
-          role='presentation'
-        />
-      </Button>
-      {{#if this.isPreviewVisible}}
-        <div class='default-preview'>
-          <FieldContainer
-            @label='Card Type'
-            @icon={{@model.constructor.icon}}
-            data-test-edit-preview='cardType'
-          >
-            {{@model.constructor.displayName}}
-          </FieldContainer>
-          {{#each this.previewFields as |item|}}
-            {{#let item.Field as |Field|}}
-              <FieldContainer
-                @label={{item.label}}
-                @icon={{if
-                  (eq item.key 'cardThumbnailURL')
-                  LinkIcon
-                  (getFieldIcon @model item.key)
-                }}
-                data-test-edit-preview={{item.key}}
-                data-edit-preview-field={{item.key}}
-              >
-                {{#if item.value}}
-                  <Field @format='atom' />
-                {{else}}
-                  <em class='null-preview'>
-                    {{#if (and (eq item.key 'cardTheme') @hideThemeChooser)}}
-                      (Self)
-                    {{else}}
-                      None
-                    {{/if}}
-                  </em>
-                {{/if}}
-              </FieldContainer>
-            {{/let}}
-          {{/each}}
-        </div>
-      {{/if}}
-      <FieldContainer class='main-fields'>
-        <:label>
-          <div class='cardInfo-thumbnail-container'>
-            <CardInfoImageContainer
-              class='cardInfo-thumbnail-preview'
-              @cardThumbnailURL={{@model.cardThumbnailURL}}
-              @icon={{@model.constructor.icon}}
-              data-test-thumbnail-image
-            />
-            <Button
-              class='cardInfo-thumbnail-popup-toggle'
-              @size='extra-small'
-              @kind='secondary-light'
-              {{on 'click' this.toggleThumbnailEditor}}
-              data-test-toggle-thumbnail-editor
-            >
-              Change
-              {{#unless @hideThemeChooser}}Theme & {{/unless}}Thumbnail
-            </Button>
-          </div>
-        </:label>
-        <:default>
-          <div class='card-info-edit-fields'>
-            <FieldContainer
-              class='card-info-field'
-              @label='Name'
-              @tag='label'
-              @labelFontSize='default'
-              @icon={{NameIcon}}
-              @vertical={{true}}
-              data-test-field='cardInfo-name'
-            >
-              <@fields.cardInfo.name />
-            </FieldContainer>
+    <div class='card-info-editor'>
+      <div class='card-info-preview-group'>
+        <Button
+          class={{cn 'preview-toggle' is-preview-visible=this.isPreviewVisible}}
+          @size='extra-small'
+          @kind='text-only'
+          {{on 'click' this.togglePreview}}
+          data-test-toggle-preview
+        >
+          {{if this.isPreviewVisible 'Hide' 'Show'}}
+          Default Preview
+          <ChevronRight
+            class='preview-toggle-icon'
+            width='14'
+            height='14'
+            role='presentation'
+          />
+        </Button>
+        {{#if this.isPreviewVisible}}
+          <div class='default-preview'>
             <FieldContainer
-              class='card-info-field'
-              @label='Summary'
-              @tag='label'
-              @labelFontSize='default'
-              @icon={{SummaryIcon}}
-              @vertical={{true}}
-              data-test-field='cardInfo-summary'
+              class='preview-field'
+              @label='Card Type'
+              @icon={{@model.constructor.icon}}
+              data-test-edit-preview='cardType'
             >
-              <@fields.cardInfo.summary />
+              {{@model.constructor.displayName}}
             </FieldContainer>
+            {{#each this.previewFields as |item|}}
+              {{#let item.Field as |Field|}}
+                <FieldContainer
+                  class='preview-field'
+                  @label={{item.label}}
+                  @icon={{if
+                    (eq item.key 'cardThumbnailURL')
+                    LinkIcon
+                    (getFieldIcon @model item.key)
+                  }}
+                  data-test-edit-preview={{item.key}}
+                  data-edit-preview-field={{item.key}}
+                >
+                  {{#if item.value}}
+                    <Field @format='atom' />
+                  {{else}}
+                    <em class='null-preview'>
+                      {{#if (and (eq item.key 'cardTheme') @hideThemeChooser)}}
+                        (Self)
+                      {{else}}
+                        None
+                      {{/if}}
+                    </em>
+                  {{/if}}
+                </FieldContainer>
+              {{/let}}
+            {{/each}}
           </div>
-        </:default>
-      </FieldContainer>
-      {{#if this.isThumbnailEditorVisible}}
-        <div class='hidden-fields'>
+        {{/if}}
+      </div>
+      <div class='card-info-fields'>
+        <CardInfoImageContainer
+          class='card-info-thumbnail-preview'
+          @cardThumbnailURL={{@model.cardThumbnailURL}}
+          @icon={{@model.constructor.icon}}
+          data-test-thumbnail-image
+        />
+        <div class='card-info-edit-fields card-info-edit-field-group'>
           <FieldContainer
             class='card-info-field'
-            @label='Thumbnail URL'
+            @label='Name'
             @tag='label'
-            @icon={{ImageIcon}}
-            data-test-field='cardInfo-thumbnailURL'
+            @labelFontSize='default'
+            @icon={{NameIcon}}
+            @vertical={{true}}
+            data-test-field='cardInfo-name'
           >
-            <div class='thumbnail-picker' data-thumbnail-picker-controls>
-              <div class='thumbnail-picker-inputs'>
-                <span
-                  class='thumbnail-picker-input-slot'
-                  data-test-thumbnail-input
-                >
-                  <@fields.cardInfo.cardThumbnailURL />
-                </span>
-                {{#if this.hasThumbnailUrl}}
-                  <IconButton
-                    class='thumbnail-picker-clear'
-                    @icon={{XIcon}}
-                    @width='16px'
-                    @height='16px'
-                    aria-label='Clear thumbnail'
-                    data-test-thumbnail-clear
-                    {{on 'click' this.clearThumbnail}}
-                  />
-                {{else if this.computedThumbnailFallback}}
-                  <span
-                    class='thumbnail-picker-placeholder'
-                    data-test-thumbnail-placeholder
-                    aria-hidden='true'
-                  >{{this.computedThumbnailFallback}}</span>
-                {{/if}}
-              </div>
-              {{#unless this.hasThumbnailUrl}}
-                <span class='thumbnail-picker-or'>or</span>
-                <Button
-                  @kind='secondary'
-                  @size='extra-small'
-                  data-test-thumbnail-select-image
-                  {{on 'click' this.selectThumbnailImage}}
-                >
-                  Select Image
-                </Button>
-              {{/unless}}
-            </div>
+            <@fields.cardInfo.name />
+          </FieldContainer>
+          <FieldContainer
+            class='card-info-field'
+            @label='Summary'
+            @tag='label'
+            @labelFontSize='default'
+            @icon={{SummaryIcon}}
+            @vertical={{true}}
+            data-test-field='cardInfo-summary'
+          >
+            <@fields.cardInfo.summary />
           </FieldContainer>
-          {{#unless @hideThemeChooser}}
+        </div>
+        <Button
+          class='card-info-thumbnail-popup-toggle'
+          @size='extra-small'
+          @kind='secondary-light'
+          {{on 'click' this.toggleThumbnailEditor}}
+          data-test-toggle-thumbnail-editor
+        >
+          Change
+          {{#unless @hideThemeChooser}}Theme & {{/unless}}Thumbnail
+        </Button>
+        {{#if this.isThumbnailEditorVisible}}
+          <div class='hidden-fields card-info-edit-field-group'>
             <FieldContainer
-              class='card-info-field theme-field'
-              @label='Theme'
-              @icon={{ThemeIcon}}
-              data-test-field='cardInfo-theme'
+              class='card-info-field'
+              @label='Thumbnail URL'
+              @tag='label'
+              @icon={{ImageIcon}}
+              data-test-field='cardInfo-thumbnailURL'
             >
-              <@fields.cardInfo.theme />
+              <div class='thumbnail-picker' data-thumbnail-picker-controls>
+                <div class='thumbnail-picker-inputs'>
+                  <span
+                    class='thumbnail-picker-input-slot'
+                    data-test-thumbnail-input
+                  >
+                    <@fields.cardInfo.cardThumbnailURL />
+                  </span>
+                  {{#if this.hasThumbnailUrl}}
+                    <IconButton
+                      class='thumbnail-picker-clear'
+                      @icon={{XIcon}}
+                      @width='16px'
+                      @height='16px'
+                      aria-label='Clear thumbnail'
+                      data-test-thumbnail-clear
+                      {{on 'click' this.clearThumbnail}}
+                    />
+                  {{else if this.computedThumbnailFallback}}
+                    <span
+                      class='thumbnail-picker-placeholder'
+                      data-test-thumbnail-placeholder
+                      aria-hidden='true'
+                    >{{this.computedThumbnailFallback}}</span>
+                  {{/if}}
+                </div>
+                {{#unless this.hasThumbnailUrl}}
+                  <span class='thumbnail-picker-or'>or</span>
+                  <Button
+                    @kind='secondary'
+                    @size='extra-small'
+                    data-test-thumbnail-select-image
+                    {{on 'click' this.selectThumbnailImage}}
+                  >
+                    Select Image
+                  </Button>
+                {{/unless}}
+              </div>
             </FieldContainer>
-          {{/unless}}
-        </div>
-      {{/if}}
+            {{#unless @hideThemeChooser}}
+              <FieldContainer
+                class='card-info-field theme-field'
+                @label='Theme'
+                @icon={{ThemeIcon}}
+                data-test-field='cardInfo-theme'
+              >
+                <@fields.cardInfo.theme />
+              </FieldContainer>
+            {{/unless}}
+          </div>
+        {{/if}}
+      </div>
     </div>
     <style scoped>
-      .cardInfo-editor {
-        --thumbnail-container-size: 6.25rem;
+      .card-info-editor {
+        container-name: cardInfo-editor-template;
+        container-type: inline-size;
         position: relative;
         width: 100%;
         max-width: 100%;
       }
+
+      .card-info-preview-group {
+        display: grid;
+        gap: var(--boxel-sp-xs);
+      }
       .preview-toggle {
-        position: absolute;
-        top: calc(-1 * var(--boxel-sp-lg));
-        right: 0;
+        margin-left: auto;
         min-width: 10.5rem;
         justify-content: space-between;
       }
@@ -314,36 +316,56 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
       .is-preview-visible .preview-toggle-icon {
         transform: rotate(-90deg);
       }
-      .preview-toggle + .default-preview {
-        margin-top: var(--boxel-sp-lg);
-      }
-      .default-preview + .main-fields {
-        margin-top: var(--boxel-sp-lg);
-      }
       .default-preview {
+        display: grid;
+        gap: var(--boxel-sp);
+        margin-bottom: var(--boxel-sp-xl);
         padding: var(--boxel-sp-lg);
-        background-color: var(--accent, var(--boxel-200));
-        border-radius: var(--radius, var(--boxel-border-radius));
-        color: var(--accent-foreground, var(--boxel-dark));
+        background-color: var(--accent);
+        border-radius: var(--radius);
+        color: var(--accent-foreground);
       }
-      .cardInfo-thumbnail-container {
-        display: flex;
-        flex-direction: column;
+      .preview-field,
+      .preview-field > :deep(.label-container) {
+        --boxel-field-content-padding: 0;
+        min-height: unset;
+        padding-top: unset;
+      }
+
+      .card-info-fields {
+        --thumbnail-container-size: 6.25rem;
+        display: grid;
+        grid-template-areas:
+          'thumbnail name-summary'
+          'thumbnail-toggle name-summary'
+          'hidden-fields hidden-fields';
+        grid-template-columns:
+          var(--boxel-field-label-size, minmax(8rem, 25%))
+          1fr;
         align-items: center;
-        padding-right: var(--boxel-sp-xl);
+        justify-items: center;
       }
-      .cardInfo-thumbnail-preview {
-        border: 1px solid var(--border, var(--boxel-form-control-border-color));
+      .card-info-thumbnail-preview {
+        grid-area: thumbnail;
+        border: 1px solid var(--border);
       }
-      .cardInfo-thumbnail-popup-toggle {
-        margin-top: var(--boxel-sp-xs);
+      .card-info-thumbnail-popup-toggle {
+        grid-area: thumbnail-toggle;
+        max-width: 9.375rem;
+        padding-inline: var(--boxel-sp-xs);
       }
-      .card-info-field + .card-info-field {
-        margin-top: var(--boxel-sp-lg);
+      .card-info-edit-fields {
+        grid-area: name-summary;
       }
       .hidden-fields {
+        grid-area: hidden-fields;
         margin-top: var(--boxel-sp);
       }
+      .card-info-edit-field-group {
+        width: 100%;
+        display: grid;
+        gap: var(--boxel-sp-lg);
+      }
       .theme-field :deep(.links-to-editor .field-component-card) {
         min-height: var(--boxel-form-control-height);
       }
@@ -409,6 +431,36 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         overflow-wrap: anywhere;
         min-width: 0;
       }
+
+      @container cardInfo-editor-template (width < 425px) {
+        .card-info-preview-group {
+          margin-bottom: var(--boxel-sp);
+        }
+        .default-preview {
+          margin-bottom: 0;
+        }
+        .card-info-fields {
+          --thumbnail-container-size: 4.375rem;
+          grid-template-columns: var(--thumbnail-container-size) 1fr;
+          gap: var(--boxel-sp-sm);
+          align-items: flex-end;
+        }
+        .card-info-edit-field-group {
+          gap: var(--boxel-sp-xs);
+        }
+        .card-info-thumbnail-popup-toggle {
+          align-self: start;
+          max-width: var(--thumbnail-container-size);
+          min-width: unset;
+          padding-inline: 0;
+          border-radius: var(--boxel-border-radius-sm);
+          font-size: 0.6875rem;
+        }
+        .card-info-thumbnail-preview :deep(.icon) {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+      }
     </style>
   </template>
 
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 5cc2b6da778..4bf8466a26f 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -61,58 +61,63 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       class={{cn 'default-card-template' @format}}
       data-test-base-template={{@format}}
     >
-      <Header @hasBottomBorder={{true}} class='card-info-header'>
-        {{#if (eq @format 'isolated')}}
-          <CardInfoTemplates.view
-            @cardTitle={{@model.cardTitle}}
-            @cardDescription={{@model.cardDescription}}
-            @cardThumbnailURL={{@model.cardThumbnailURL}}
-            @icon={{@model.constructor.icon}}
-          />
-        {{else}}
-          <CardInfoTemplates.edit
-            @fields={{@fields}}
-            @model={{@model}}
-            @hideThemeChooser={{this.isThemeCard}}
-          />
+      <div class={{cn 'default-card-template--inner' @format}}>
+        <Header @hasBottomBorder={{true}} class='card-info-header'>
+          {{#if (eq @format 'isolated')}}
+            <CardInfoTemplates.view
+              @cardTitle={{@model.cardTitle}}
+              @cardDescription={{@model.cardDescription}}
+              @cardThumbnailURL={{@model.cardThumbnailURL}}
+              @icon={{@model.constructor.icon}}
+            />
+          {{else}}
+            <CardInfoTemplates.edit
+              @fields={{@fields}}
+              @model={{@model}}
+              @hideThemeChooser={{this.isThemeCard}}
+            />
+          {{/if}}
+        </Header>
+        {{#if this.displayFields}}
+          <section class='own-display-fields'>
+            {{#each-in this.displayFields as |key Field|}}
+              <FieldContainer
+                @label={{startCase key}}
+                @icon={{getFieldIcon @model key}}
+                data-test-field={{key}}
+              >
+                <Field class='in-isolated' />
+              </FieldContainer>
+            {{/each-in}}
+          </section>
         {{/if}}
-      </Header>
-      {{#if this.displayFields}}
-        <section class='own-display-fields'>
-          {{#each-in this.displayFields as |key Field|}}
-            <FieldContainer
-              @label={{startCase key}}
-              @icon={{getFieldIcon @model key}}
-              data-test-field={{key}}
-            >
-              <Field class='in-isolated' />
-            </FieldContainer>
-          {{/each-in}}
-        </section>
-      {{/if}}
-      <footer class='notes-footer'>
-        <FieldContainer
-          @label='Notes'
-          @icon={{getFieldIcon @model.cardInfo 'notes'}}
-          data-test-field='cardInfo-notes'
-        >
-          <@fields.cardInfo.notes />
-        </FieldContainer>
-      </footer>
+        <footer class='notes-footer'>
+          <FieldContainer
+            @label='Notes'
+            @icon={{getFieldIcon @model.cardInfo 'notes'}}
+            data-test-field='cardInfo-notes'
+          >
+            <@fields.cardInfo.notes />
+          </FieldContainer>
+        </footer>
+      </div>
     </div>
     <style scoped>
       .default-card-template {
-        --hr-color: rgba(0 0 0 / 10%);
+        container-name: default-template;
+        container-type: inline-size;
+      }
+      .default-card-template--inner {
+        --boxel-default-template-padding: var(--boxel-sp-xl);
+        --boxel-default-template-hr-color: rgba(0 0 0 / 10%);
         display: grid;
       }
       .card-info-header {
         --boxel-header-min-height: 9.375rem; /* 150px */
-        --boxel-header-padding: var(--boxel-sp-xxl) var(--boxel-sp-xl)
-          var(--boxel-sp-xl);
+        --boxel-header-padding: var(--boxel-default-template-padding);
         --boxel-header-gap: var(--boxel-sp-lg);
-        --boxel-header-border-color: var(--hr-color);
-        align-items: flex-start;
-        background-color: var(--muted, var(--boxel-100));
+        --boxel-header-border-color: var(--boxel-default-template-hr-color);
+        background-color: var(--muted);
       }
       .card-info-header :deep(.info) {
         align-self: center;
@@ -123,14 +128,14 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       .own-display-fields {
         display: grid;
         gap: var(--boxel-sp-lg);
-        padding: var(--boxel-sp-xl);
-        background-color: var(--background, var(--boxel-light));
+        padding: var(--boxel-default-template-padding);
+        background-color: var(--background);
       }
       .own-display-fields + .notes-footer {
-        border-top: 1px solid var(--hr-color);
+        border-top: 1px solid var(--boxel-default-template-hr-color);
       }
       .notes-footer {
-        padding: var(--boxel-sp-xl);
+        padding: var(--boxel-default-template-padding);
       }
       .tags {
         display: flex;
@@ -139,22 +144,20 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         margin-top: var(--boxel-sp-xs);
       }
       .default-card-template.edit > .notes-footer {
-        background-color: var(--muted, var(--boxel-100));
-      }
-      .default-card-template.edit {
-        container-name: default-edit-template;
-        container-type: inline-size;
+        background-color: var(--muted);
       }
       /* stack field labels above their inputs when the template is narrow */
-      @container default-edit-template (width < 400px) {
-        .default-card-template.edit :deep(.boxel-field.horizontal) {
+      @container default-template (width < 425px) {
+        .default-card-template--inner {
+          --boxel-default-template-padding: var(--boxel-sp);
+        }
+        :deep(.boxel-field.horizontal:not(.theme-field)) {
           grid-template-columns: 1fr;
           grid-template-rows: auto 1fr;
-          gap: var(--boxel-sp-4xs);
+          gap: var(--boxel-sp-xs);
           min-height: unset;
         }
-        .default-card-template.edit
-          :deep(.boxel-field.horizontal > .label-container) {
+        :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
           padding-top: 0;
         }
       }

From 45074d5e57b6230174089ec2dcc309f946b11357 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 14:28:20 -0400
Subject: [PATCH 03/13] Wrap default template field labels per field instead of
 at a fixed breakpoint

Horizontal fields in the default isolated/edit template now use
flex-wrap: each label stays beside its input until the field's content
area would drop below 14rem, then wraps above it. A per-field container
query zeroes the label's alignment padding exactly when it wraps.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../default-templates/isolated-and-edit.gts   | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 4bf8466a26f..eec70557930 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -146,20 +146,38 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       .default-card-template.edit > .notes-footer {
         background-color: var(--muted);
       }
-      /* stack field labels above their inputs when the template is narrow */
+      /* keep field labels beside their inputs, wrapping the label above the
+         input only when the field's content area gets too narrow */
+      :deep(.boxel-field.horizontal:not(.theme-field)) {
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: var(--boxel-sp-xs);
+        container-name: horizontal-field;
+        container-type: inline-size;
+      }
+      :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
+        flex: 0 0 25%;
+        min-width: 8rem;
+      }
+      :deep(.boxel-field.horizontal:not(.theme-field) > .content) {
+        flex: 1 1 14rem;
+        min-width: 0;
+      }
+      /* below the label min-width (8rem) plus the content flex-basis (14rem)
+         the label has wrapped above the input, so drop the padding that
+         aligns it with the input's first line */
+      @container horizontal-field (width < 22rem) {
+        :deep(.label-container) {
+          padding-top: 0;
+        }
+      }
       @container default-template (width < 425px) {
         .default-card-template--inner {
           --boxel-default-template-padding: var(--boxel-sp);
         }
         :deep(.boxel-field.horizontal:not(.theme-field)) {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto 1fr;
-          gap: var(--boxel-sp-xs);
           min-height: unset;
         }
-        :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
-          padding-top: 0;
-        }
       }
       /* this aligns edit fields with containsMany, linksTo, and linksToMany fields */
       .default-card-template.edit

From eecf207963d5ded526cc1dadcafa4f6c82805899 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 14:42:26 -0400
Subject: [PATCH 04/13] Give wrapped field labels the full line in the default
 template

When a field stacks, the label previously kept its 25% flex-basis, so
multi-word labels text-wrapped inside the narrow label column. The
wrapped-state container query now sets flex-basis: 100% so the label
spans its own line.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/default-templates/isolated-and-edit.gts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index eec70557930..842ca9cb485 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -164,10 +164,12 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         min-width: 0;
       }
       /* below the label min-width (8rem) plus the content flex-basis (14rem)
-         the label has wrapped above the input, so drop the padding that
+         the label wraps above the input: give it the full line so its text
+         doesn't wrap inside the label column, and drop the padding that
          aligns it with the input's first line */
       @container horizontal-field (width < 22rem) {
-        :deep(.label-container) {
+        :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
+          flex-basis: 100%;
           padding-top: 0;
         }
       }

From 4c65ac7e0d01404bec064db888b60e13e8d29404 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 16:19:23 -0400
Subject: [PATCH 05/13] Align isolated-format field labels with the top of
 their content

Isolated fields render text rather than form controls, so the label's
input-alignment padding pushed it below the content's first line. Zero
that padding in isolated format and top-align the content instead of
centering it.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/default-templates/isolated-and-edit.gts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 842ca9cb485..87cbe76ec7a 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -163,6 +163,16 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         flex: 1 1 14rem;
         min-width: 0;
       }
+      /* isolated fields render text rather than form controls: align the
+         label with the top of the content instead of an input's first line */
+      .default-card-template.isolated
+        :deep(.boxel-field.horizontal:not(.theme-field) > .label-container) {
+        padding-top: 0;
+      }
+      .default-card-template.isolated
+        :deep(.boxel-field.horizontal:not(.theme-field) > .content) {
+        align-self: start;
+      }
       /* below the label min-width (8rem) plus the content flex-basis (14rem)
          the label wraps above the input: give it the full line so its text
          doesn't wrap inside the label column, and drop the padding that

From 722a71d764eb3f694f4f055c28d86cf7b4ed54c8 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 17:20:12 -0400
Subject: [PATCH 06/13] Render edit-format field labels as label elements for
 simple fields

Only fields whose editor is a single form control (primitive, non-computed contains fields) get a <label> wrapper; compound and linked editors contain buttons that an implicit label association would activate when the label text is clicked. Also tidies isolated-format content outline spacing and thumbnail-toggle margins.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/default-templates/card-info.gts |  2 ++
 .../default-templates/isolated-and-edit.gts   | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/packages/base/default-templates/card-info.gts b/packages/base/default-templates/card-info.gts
index 8fef0ffad1e..892790c5791 100644
--- a/packages/base/default-templates/card-info.gts
+++ b/packages/base/default-templates/card-info.gts
@@ -352,6 +352,7 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
       .card-info-thumbnail-popup-toggle {
         grid-area: thumbnail-toggle;
         max-width: 9.375rem;
+        margin-inline: var(--boxel-sp-xs);
         padding-inline: var(--boxel-sp-xs);
       }
       .card-info-edit-fields {
@@ -452,6 +453,7 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
           align-self: start;
           max-width: var(--thumbnail-container-size);
           min-width: unset;
+          margin-inline: 0;
           padding-inline: 0;
           border-radius: var(--boxel-border-radius-sm);
           font-size: 0.6875rem;
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 87cbe76ec7a..3e08c90bb1a 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -7,6 +7,7 @@ import {
   getFieldIcon,
   getField,
   cardDefComputedFields,
+  primitive,
 } from '@cardstack/runtime-common';
 import CardInfoTemplates from './card-info';
 
@@ -50,6 +51,22 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
     return Object.fromEntries(fields) as FieldsTypeFor<CardDef>;
   }
 
+  // A field can safely render inside a <label> only when its editor is a
+  // single form control: compound and linked editors contain buttons that an
+  // implicit label association would activate when the label text is clicked,
+  // and computed fields render a read-only view with no control to label.
+  private editFieldTag = (fieldName: string): 'label' | undefined => {
+    if (this.args.format !== 'edit') {
+      return undefined;
+    }
+    let field = getField(this.args.model.constructor, fieldName);
+    return field?.fieldType === 'contains' &&
+      !field.computeVia &&
+      primitive in field.card
+      ? 'label'
+      : undefined;
+  };
+
   private get isThemeCard() {
     return Boolean(
       Object.entries(this.args.fields).find(([key]) => key === 'cssVariables'),
@@ -84,6 +101,7 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
               <FieldContainer
                 @label={{startCase key}}
                 @icon={{getFieldIcon @model key}}
+                @tag={{this.editFieldTag key}}
                 data-test-field={{key}}
               >
                 <Field class='in-isolated' />
@@ -95,6 +113,7 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
           <FieldContainer
             @label='Notes'
             @icon={{getFieldIcon @model.cardInfo 'notes'}}
+            @tag={{if (eq @format 'edit') 'label'}}
             data-test-field='cardInfo-notes'
           >
             <@fields.cardInfo.notes />
@@ -171,6 +190,7 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
       }
       .default-card-template.isolated
         :deep(.boxel-field.horizontal:not(.theme-field) > .content) {
+        --boxel-outline-width: 0;
         align-self: start;
       }
       /* below the label min-width (8rem) plus the content flex-basis (14rem)

From 8fb9f84a31f1112734c65b185b407d549ecfb092 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 17:29:33 -0400
Subject: [PATCH 07/13] Test label-element gating for edit-format field
 wrappers

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/card-basics-test.gts           | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/packages/host/tests/integration/components/card-basics-test.gts b/packages/host/tests/integration/components/card-basics-test.gts
index ccf201b8bae..43e41b98b24 100644
--- a/packages/host/tests/integration/components/card-basics-test.gts
+++ b/packages/host/tests/integration/components/card-basics-test.gts
@@ -2348,6 +2348,40 @@ module('Integration | card-basics', function (hooks) {
       assert.dom('[data-test-edit-preview]').doesNotExist();
     });
 
+    test('edit format wraps only simple contained fields in a label element', async function (assert) {
+      class Pet extends CardDef {}
+      class PetPerson extends CardDef {
+        @field nickname = contains(StringField);
+        @field aliases = containsMany(StringField);
+        @field pet = linksTo(Pet);
+        @field greeting = contains(StringField, {
+          computeVia: function (this: PetPerson) {
+            return `Hi ${this.nickname}`;
+          },
+        });
+      }
+      loader.shimModule(`${testRealmURL}test-cards`, { PetPerson, Pet });
+
+      let instance = new PetPerson({ nickname: 'Bee' });
+      await renderCard(loader, instance, 'edit');
+
+      // a <label> wrapper is only safe when the editor is a single form
+      // control: compound and linked editors contain buttons that an implicit
+      // label association would activate when the label text is clicked
+      assert
+        .dom('[data-test-field="nickname"]')
+        .hasTagName('label', 'primitive contains field is a label');
+      assert
+        .dom('[data-test-field="aliases"]')
+        .hasTagName('div', 'containsMany field is not a label');
+      assert
+        .dom('[data-test-field="pet"]')
+        .hasTagName('div', 'linksTo field is not a label');
+      assert
+        .dom('[data-test-field="greeting"]')
+        .hasTagName('div', 'computed field is not a label');
+    });
+
     test('render card-def instance with cardInfo overrides', async function (assert) {
       class Team extends CardDef {}
       class Person extends CardDef {

From b8920cc95c272bfdc663501dfe9d52c331b502ed Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 18:02:41 -0400
Subject: [PATCH 08/13] Remove label-element wrappers from default-template
 field containers

An implicit label association is only safe when a field's editor is a
single form control, and the primitive-field gate could not guarantee
that (e.g. BooleanField's radio-group editor renders its own labels),
so edit-format field containers render as plain divs again.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../default-templates/isolated-and-edit.gts   | 19 -----------
 .../components/card-basics-test.gts           | 34 -------------------
 2 files changed, 53 deletions(-)

diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 3e08c90bb1a..44a181d064c 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -7,7 +7,6 @@ import {
   getFieldIcon,
   getField,
   cardDefComputedFields,
-  primitive,
 } from '@cardstack/runtime-common';
 import CardInfoTemplates from './card-info';
 
@@ -51,22 +50,6 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
     return Object.fromEntries(fields) as FieldsTypeFor<CardDef>;
   }
 
-  // A field can safely render inside a <label> only when its editor is a
-  // single form control: compound and linked editors contain buttons that an
-  // implicit label association would activate when the label text is clicked,
-  // and computed fields render a read-only view with no control to label.
-  private editFieldTag = (fieldName: string): 'label' | undefined => {
-    if (this.args.format !== 'edit') {
-      return undefined;
-    }
-    let field = getField(this.args.model.constructor, fieldName);
-    return field?.fieldType === 'contains' &&
-      !field.computeVia &&
-      primitive in field.card
-      ? 'label'
-      : undefined;
-  };
-
   private get isThemeCard() {
     return Boolean(
       Object.entries(this.args.fields).find(([key]) => key === 'cssVariables'),
@@ -101,7 +84,6 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
               <FieldContainer
                 @label={{startCase key}}
                 @icon={{getFieldIcon @model key}}
-                @tag={{this.editFieldTag key}}
                 data-test-field={{key}}
               >
                 <Field class='in-isolated' />
@@ -113,7 +95,6 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
           <FieldContainer
             @label='Notes'
             @icon={{getFieldIcon @model.cardInfo 'notes'}}
-            @tag={{if (eq @format 'edit') 'label'}}
             data-test-field='cardInfo-notes'
           >
             <@fields.cardInfo.notes />
diff --git a/packages/host/tests/integration/components/card-basics-test.gts b/packages/host/tests/integration/components/card-basics-test.gts
index 43e41b98b24..ccf201b8bae 100644
--- a/packages/host/tests/integration/components/card-basics-test.gts
+++ b/packages/host/tests/integration/components/card-basics-test.gts
@@ -2348,40 +2348,6 @@ module('Integration | card-basics', function (hooks) {
       assert.dom('[data-test-edit-preview]').doesNotExist();
     });
 
-    test('edit format wraps only simple contained fields in a label element', async function (assert) {
-      class Pet extends CardDef {}
-      class PetPerson extends CardDef {
-        @field nickname = contains(StringField);
-        @field aliases = containsMany(StringField);
-        @field pet = linksTo(Pet);
-        @field greeting = contains(StringField, {
-          computeVia: function (this: PetPerson) {
-            return `Hi ${this.nickname}`;
-          },
-        });
-      }
-      loader.shimModule(`${testRealmURL}test-cards`, { PetPerson, Pet });
-
-      let instance = new PetPerson({ nickname: 'Bee' });
-      await renderCard(loader, instance, 'edit');
-
-      // a <label> wrapper is only safe when the editor is a single form
-      // control: compound and linked editors contain buttons that an implicit
-      // label association would activate when the label text is clicked
-      assert
-        .dom('[data-test-field="nickname"]')
-        .hasTagName('label', 'primitive contains field is a label');
-      assert
-        .dom('[data-test-field="aliases"]')
-        .hasTagName('div', 'containsMany field is not a label');
-      assert
-        .dom('[data-test-field="pet"]')
-        .hasTagName('div', 'linksTo field is not a label');
-      assert
-        .dom('[data-test-field="greeting"]')
-        .hasTagName('div', 'computed field is not a label');
-    });
-
     test('render card-def instance with cardInfo overrides', async function (assert) {
       class Team extends CardDef {}
       class Person extends CardDef {

From f8f12a86971e4b0703e8675102679a747bb4a33b Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 18:03:36 -0400
Subject: [PATCH 09/13] Rename card-info editor container to match class naming

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/default-templates/card-info.gts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/base/default-templates/card-info.gts b/packages/base/default-templates/card-info.gts
index 892790c5791..3f9f137e39c 100644
--- a/packages/base/default-templates/card-info.gts
+++ b/packages/base/default-templates/card-info.gts
@@ -294,7 +294,7 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
     </div>
     <style scoped>
       .card-info-editor {
-        container-name: cardInfo-editor-template;
+        container-name: card-info-editor-template;
         container-type: inline-size;
         position: relative;
         width: 100%;
@@ -433,7 +433,7 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         min-width: 0;
       }
 
-      @container cardInfo-editor-template (width < 425px) {
+      @container card-info-editor-template (width < 425px) {
         .card-info-preview-group {
           margin-bottom: var(--boxel-sp);
         }

From 4a491290341c9ffce246c29c08630166cc7aecd4 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 18:03:49 -0400
Subject: [PATCH 10/13] Align realm-config header styling with the reworked
 card-info editor

The card-info editor's preview toggle now sits in normal flow, so the
extra header top padding and flex-start alignment that cleared its old
absolute position are gone; padding and hr color route through scoped
custom properties like the default card template's.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/realm-config.gts | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/base/realm-config.gts b/packages/base/realm-config.gts
index 7fa1b993133..ea3013c225f 100644
--- a/packages/base/realm-config.gts
+++ b/packages/base/realm-config.gts
@@ -374,30 +374,29 @@ class RealmConfigEdit extends Component<typeof RealmConfig> {
     </div>
     <style scoped>
       .realm-config-edit {
-        --hr-color: rgba(0 0 0 / 10%);
+        --realm-config-padding: var(--boxel-sp-xl);
+        --realm-config-hr-color: rgba(0 0 0 / 10%);
         display: grid;
       }
       .card-info-header {
         --boxel-header-min-height: 9.375rem;
-        --boxel-header-padding: var(--boxel-sp-xxl) var(--boxel-sp-xl)
-          var(--boxel-sp-xl);
+        --boxel-header-padding: var(--realm-config-padding);
         --boxel-header-gap: var(--boxel-sp-lg);
-        --boxel-header-border-color: var(--hr-color);
-        align-items: flex-start;
-        background-color: var(--muted, var(--boxel-100));
+        --boxel-header-border-color: var(--realm-config-hr-color);
+        background-color: var(--muted);
       }
       .own-display-fields {
         display: grid;
         gap: var(--boxel-sp-lg);
-        padding: var(--boxel-sp-xl);
-        background-color: var(--background, var(--boxel-light));
+        padding: var(--realm-config-padding);
+        background-color: var(--background);
       }
       .own-display-fields + .notes-footer {
-        border-top: 1px solid var(--hr-color);
+        border-top: 1px solid var(--realm-config-hr-color);
       }
       .notes-footer {
-        padding: var(--boxel-sp-xl);
-        background-color: var(--muted, var(--boxel-100));
+        padding: var(--realm-config-padding);
+        background-color: var(--muted);
       }
       .warning {
         background: #fef3c7;

From c181cb914cf58546f347b3b3924c0ccd9027ca37 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Thu, 16 Jul 2026 18:15:29 -0400
Subject: [PATCH 11/13] Drop label wrapper from thumbnail URL field and pad
 preview labels

The thumbnail picker renders clear/select buttons alongside its input,
so its field container stays a plain div like the other edit-format
fields.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/default-templates/card-info.gts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base/default-templates/card-info.gts b/packages/base/default-templates/card-info.gts
index 3f9f137e39c..2ed59029825 100644
--- a/packages/base/default-templates/card-info.gts
+++ b/packages/base/default-templates/card-info.gts
@@ -235,7 +235,6 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
             <FieldContainer
               class='card-info-field'
               @label='Thumbnail URL'
-              @tag='label'
               @icon={{ImageIcon}}
               data-test-field='cardInfo-thumbnailURL'
             >
@@ -330,6 +329,7 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         --boxel-field-content-padding: 0;
         min-height: unset;
         padding-top: unset;
+        padding-right: var(--boxel-sp-4xs);
       }
 
       .card-info-fields {

From 555de59750f17e22b703d8fcde63d7efa5afb776 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Fri, 17 Jul 2026 16:24:51 -0400
Subject: [PATCH 12/13] Anchor edit-mode notes-footer background to the inner
 wrapper

The notes footer is a child of .default-card-template--inner, which also
carries the format class, so the direct-child selector matches there.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/base/default-templates/isolated-and-edit.gts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 44a181d064c..07b2c25239e 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -143,7 +143,7 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         gap: var(--boxel-sp-xs);
         margin-top: var(--boxel-sp-xs);
       }
-      .default-card-template.edit > .notes-footer {
+      .default-card-template--inner.edit > .notes-footer {
         background-color: var(--muted);
       }
       /* keep field labels beside their inputs, wrapping the label above the

From 519b49781edfc69db9875f63aa2b04e353b172a7 Mon Sep 17 00:00:00 2001
From: Burcu Noyan <burcunoyan@gmail.com>
Date: Fri, 17 Jul 2026 17:39:25 -0400
Subject: [PATCH 13/13] spacing adjustments

---
 packages/base/default-templates/card-info.gts | 29 ++++++++++++++-----
 .../default-templates/isolated-and-edit.gts   | 10 +++++--
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/base/default-templates/card-info.gts b/packages/base/default-templates/card-info.gts
index 2ed59029825..a051360b296 100644
--- a/packages/base/default-templates/card-info.gts
+++ b/packages/base/default-templates/card-info.gts
@@ -305,8 +305,9 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         gap: var(--boxel-sp-xs);
       }
       .preview-toggle {
-        margin-left: auto;
         min-width: 10.5rem;
+        margin-left: auto;
+        margin-top: calc(-1 * var(--boxel-sp-xs));
         justify-content: space-between;
       }
       .preview-toggle-icon {
@@ -318,8 +319,11 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
       .default-preview {
         display: grid;
         gap: var(--boxel-sp);
+        margin-top: var(--boxel-sp-xs);
         margin-bottom: var(--boxel-sp-xl);
-        padding: var(--boxel-sp-lg);
+        padding-top: var(--boxel-sp-xl);
+        padding-inline: var(--boxel-sp-lg);
+        padding-bottom: var(--boxel-sp-lg);
         background-color: var(--accent);
         border-radius: var(--radius);
         color: var(--accent-foreground);
@@ -329,7 +333,6 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         --boxel-field-content-padding: 0;
         min-height: unset;
         padding-top: unset;
-        padding-right: var(--boxel-sp-4xs);
       }
 
       .card-info-fields {
@@ -342,18 +345,19 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         grid-template-columns:
           var(--boxel-field-label-size, minmax(8rem, 25%))
           1fr;
-        align-items: center;
+        align-items: start;
         justify-items: center;
       }
       .card-info-thumbnail-preview {
         grid-area: thumbnail;
+        margin-top: var(--boxel-sp-sm);
+        margin-right: var(--boxel-sp-xl);
         border: 1px solid var(--border);
       }
       .card-info-thumbnail-popup-toggle {
         grid-area: thumbnail-toggle;
-        max-width: 9.375rem;
-        margin-inline: var(--boxel-sp-xs);
-        padding-inline: var(--boxel-sp-xs);
+        margin-top: var(--boxel-sp-xs);
+        margin-right: var(--boxel-sp-xl);
       }
       .card-info-edit-fields {
         grid-area: name-summary;
@@ -437,8 +441,12 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         .card-info-preview-group {
           margin-bottom: var(--boxel-sp);
         }
+        .preview-toggle {
+          margin-top: unset;
+        }
         .default-preview {
-          margin-bottom: 0;
+          margin-top: unset;
+          margin-bottom: var(--boxel-sp-xs);
         }
         .card-info-fields {
           --thumbnail-container-size: 4.375rem;
@@ -449,10 +457,15 @@ class CardInfoEditor extends GlimmerComponent<EditSignature> {
         .card-info-edit-field-group {
           gap: var(--boxel-sp-xs);
         }
+        .card-info-thumbnail-preview {
+          margin-top: 0;
+          margin-right: 0;
+        }
         .card-info-thumbnail-popup-toggle {
           align-self: start;
           max-width: var(--thumbnail-container-size);
           min-width: unset;
+          margin-top: 0;
           margin-inline: 0;
           padding-inline: 0;
           border-radius: var(--boxel-border-radius-sm);
diff --git a/packages/base/default-templates/isolated-and-edit.gts b/packages/base/default-templates/isolated-and-edit.gts
index 07b2c25239e..e0c25b6fd95 100644
--- a/packages/base/default-templates/isolated-and-edit.gts
+++ b/packages/base/default-templates/isolated-and-edit.gts
@@ -193,7 +193,8 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         }
       }
       /* this aligns edit fields with containsMany, linksTo, and linksToMany fields */
-      .default-card-template.edit
+      .default-card-template--inner.edit
+        > :is(.own-display-fields, .notes-footer)
         > :deep(
           .boxel-field
             > .content
@@ -203,7 +204,8 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         ) {
         padding-right: var(--boxel-icon-lg);
       }
-      .default-card-template.edit
+      .default-card-template--inner.edit
+        > :is(.own-display-fields, .notes-footer)
         > :deep(
           .boxel-field
             > .content
@@ -212,7 +214,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
         padding-left: var(--boxel-icon-lg);
       }
       /* Add padding for readonly fields */
-      .default-card-template.edit > :deep(.boxel-field > .content .read-only) {
+      .default-card-template--inner.edit
+        > :is(.own-display-fields, .notes-footer)
+        > :deep(.boxel-field > .content .read-only) {
         padding-left: var(--boxel-icon-lg);
         padding-right: var(--boxel-icon-lg);
       }