@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.102 → 2.0.0-next.103

package/src/navigation-instruments/gauge-radial/gauge-radial.css

@@ -4,6 +4,13 @@
   height: 100%;
 }
 
+/* With a pinned face the host shrink-wraps the fixed-size dial, so rows of
+   pinned instruments can sit side by side in flex layouts. */
+:host([face-diameter]) {
+  width: fit-content;
+  height: fit-content;
+}
+
 .gauge-radial-root {
   /* Readout vertical placement per layout (% of the cropped box), tuned to the
      watch geometry — re-check if the ring radii or the 448 box change. Which
@@ -24,7 +31,10 @@
   height: auto;
   max-width: 100%;
   max-height: 100%;
-  aspect-ratio: 1;
+  /* --gauge-radial-aspect is set from TS only when the frame lowered a crop
+     for the label drop (frame.clipsAdjusted); otherwise the static sector
+     aspect below applies. */
+  aspect-ratio: var(--gauge-radial-aspect, 1);
 
   /* Defaults (centered both ways); overridden by the halign-* / valign-*
      classes. Horizontal alignment uses auto margins (which reference the host
@@ -38,7 +48,7 @@
   /* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
      sync with `sectorClips` bottom=44 in gauge-radial.ts. */
   &.sector-180 {
-    aspect-ratio: 448 / 251;
+    aspect-ratio: var(--gauge-radial-aspect, 448 / 251);
   }
 
   &.halign-left {
@@ -67,6 +77,26 @@
     transform: translateY(-100%);
   }
 
+  /* faceDiameter pins the dial to a fixed intrinsic size: the inner
+     instrument sets its own px box and the root shrink-wraps it. The host
+     shrink-wraps too, so there is no slack to align within — neutralize the
+     alignment offsets (declared after the valign rules to win the cascade;
+     `top: 50%` would resolve to 0 in the auto-height host anyway while the
+     translateY still applied, shifting the dial up by half its height). */
+  &.face-pinned {
+    width: fit-content;
+    height: fit-content;
+    max-width: none;
+    max-height: none;
+    aspect-ratio: auto;
+    top: 0;
+    transform: none;
+
+    &.sector-180 {
+      aspect-ratio: auto;
+    }
+  }
+
   .gauge-readout-value {
     position: absolute;
     left: 50%;

package/src/navigation-instruments/gauge-radial/gauge-radial.stories.ts

@@ -1,4 +1,5 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
 import {
   GaugeRadialHorizontalAlignment,
   GaugeRadialSector,
@@ -7,7 +8,12 @@ import {
   ObcGaugeRadialType,
 } from './gauge-radial.js';
 import './gauge-radial.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
 import {InstrumentState, Priority} from '../types.js';
@@ -15,6 +21,8 @@ import {InstrumentState, Priority} from '../types.js';
 type GaugeRadialStoryArgs = Partial<ObcGaugeRadial> & {
   width?: number;
   height?: number;
+  /** Story-only: apply faceDiameter to every playground instance. */
+  lockFaceDiameter?: boolean;
 };
 
 const meta = {
@@ -47,6 +55,11 @@ const meta = {
     showLabels: {control: 'boolean'},
     tickmarksInside: {control: 'boolean'},
     hasReadout: {control: 'boolean'},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     value: {control: 'number'},
     minValue: {control: 'number'},
     maxValue: {control: 'number'},
@@ -357,3 +370,254 @@ export const WideAdviceSpan: Story = {
     ],
   },
 };
+
+const labelRoomRow = html`
+  <div style="display: flex; gap: 8px; width: 100%; height: 100%;">
+    ${[
+      {label: 'Load', max: 100},
+      {label: 'Torque', max: 100},
+      {label: 'Throttle', max: 100},
+      {label: 'RPM', max: 3600},
+    ].map(
+      (g) => html`
+        <div style="flex: 1; min-width: 0;">
+          <obc-gauge-radial
+            .value=${g.max * 0.6}
+            .maxValue=${g.max}
+            .showLabels=${true}
+            .primaryTickmarkInterval=${g.max / 4}
+            .secondaryTickmarkInterval=${g.max / 20}
+            .hasReadout=${true}
+            .label=${g.label}
+          ></obc-gauge-radial>
+        </div>
+      `
+    )}
+  </div>
+`;
+
+/**
+ * The issue #1021 repro: four gauges squeezed in a flex dashboard row. Each
+ * dial automatically reserves room for its own labels, so the 4-digit RPM
+ * scale gets a wider margin (and a slightly smaller ring) than its 2-digit
+ * siblings — nothing is clipped. To keep the rings the same size instead,
+ * give every gauge the same `faceDiameter` — see the *Equal Circumference*
+ * stories. Try the *Sizing Playground* story to explore interactively.
+ */
+export const LabelRoomFourDigitRow: Story = {
+  name: 'Label Room — Mixed 2/4-Digit Flex Row (#1021)',
+  args: {
+    width: 800,
+    height: 200,
+  },
+  render: () => labelRoomRow,
+};
+
+/**
+ * The same row squeezed below the label-reserve cap
+ * (`LABEL_RESERVE_MAX_FRACTION` in `svghelpers/radial-frame.ts`): when labels
+ * would eat more than ~45% of the box, they are hidden entirely instead of
+ * clipped — matching the canvas charts' graceful degradation. The threshold
+ * is content-aware: 2-digit labels survive smaller cells than 4-digit ones.
+ */
+export const LabelRoomDegradationRow: Story = {
+  name: 'Label Room — Hide Past Reserve Cap (#1021)',
+  args: {
+    width: 800,
+    height: 140,
+  },
+  render: () => labelRoomRow,
+};
+
+/**
+ * `faceDiameter` pins the outer-ring diameter in px, so all four sectors
+ * (270°, 180°, 90°-left, 90°-right) render with identical ring circumference
+ * while their boxes differ per arc shape — the radial counterpart of
+ * `obc-donut-chart`'s fixed-height ⇒ fixed-circumference contract. Use the
+ * `faceDiameter` control to scale all of them together.
+ */
+export const EqualCircumferenceMixedArcs: Story = {
+  name: 'Equal Circumference — Same FaceDiameter Across Sectors',
+  args: {
+    width: 900,
+    height: 320,
+    faceDiameter: 180,
+  },
+  render: (args) => html`
+    <div style="display: flex; gap: 8px; align-items: flex-start;">
+      ${[
+        GaugeRadialSector.deg270,
+        GaugeRadialSector.deg180,
+        GaugeRadialSector.deg90Left,
+        GaugeRadialSector.deg90Right,
+      ].map(
+        (sector) => html`
+          <obc-gauge-radial
+            .sector=${sector}
+            .value=${60}
+            .maxValue=${100}
+            .faceDiameter=${args.faceDiameter ?? 180}
+            .showLabels=${true}
+            .primaryTickmarkInterval=${25}
+            .secondaryTickmarkInterval=${5}
+          ></obc-gauge-radial>
+        `
+      )}
+    </div>
+  `,
+};
+
+/**
+ * Two gauges with the same `faceDiameter` but different label widths: the
+ * rings are pixel-identical while the 4-digit gauge's box grows wider to hold
+ * its labels — the "equal circumference" answer to the unequal rings visible
+ * in the *Label Room* stories. Use the `faceDiameter` control to resize both.
+ */
+export const EqualCircumferenceMixedDigits: Story = {
+  name: 'Equal Circumference — 2-Digit Vs 4-Digit, Same FaceDiameter',
+  args: {
+    width: 700,
+    height: 300,
+    faceDiameter: 200,
+  },
+  render: (args) => html`
+    <div style="display: flex; gap: 8px; align-items: center;">
+      ${[
+        {label: 'Load', max: 99, interval: 33},
+        {label: 'RPM', max: 3600, interval: 900},
+      ].map(
+        (g) => html`
+          <obc-gauge-radial
+            .value=${g.max * 0.6}
+            .maxValue=${g.max}
+            .faceDiameter=${args.faceDiameter ?? 200}
+            .showLabels=${true}
+            .primaryTickmarkInterval=${g.interval}
+            .hasReadout=${true}
+            .label=${g.label}
+          ></obc-gauge-radial>
+        `
+      )}
+    </div>
+  `,
+};
+
+/**
+ * Interactive sizing playground: drag the dashed box's bottom-right corner to
+ * resize it. The first gauge is pinned to a fixed intrinsic size by the
+ * `faceDiameter` control (donut-chart `fixedHeight` behavior), while the
+ * 4-digit gauge and the 180° sector adapt to the remaining flex space,
+ * reserving label room adaptively (the *Label Room* stories). Enable
+ * `lockFaceDiameter` to pin all three to the same circumference — full circle
+ * and partial arcs alike (the *Equal Circumference* stories). The same
+ * behavior is available on every radial instrument — see the *Sizing
+ * Playground* stories under Building Blocks/Watch, Building Blocks/Instrument
+ * Radial, Instruments/Speed Gauge, Instruments/Compass, etc.
+ */
+export const SizingPlayground: Story = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 180,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {
+        label: '2-digit, 270°',
+        sector: GaugeRadialSector.deg270,
+        max: 100,
+        interval: 25,
+      },
+      {
+        label: '4-digit, 270°',
+        sector: GaugeRadialSector.deg270,
+        max: 3600,
+        interval: 900,
+      },
+      {
+        label: '2-digit, 180° sector',
+        sector: GaugeRadialSector.deg180,
+        max: 100,
+        interval: 25,
+      },
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first gauge is pinned by the faceDiameter control; the 4-digit gauge and the 180° sector adapt to the remaining flex space. Enable lockFaceDiameter to pin all three to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-gauge-radial
+                  .sector=${g.sector}
+                  .value=${g.max * 0.6}
+                  .maxValue=${g.max}
+                  .faceDiameter=${fd(index)}
+                  .showLabels=${true}
+                  .primaryTickmarkInterval=${g.interval}
+                ></obc-gauge-radial>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 760, height: 300}
+      )}
+    `;
+  },
+};
+
+/**
+ * A 4-digit scale in a narrow column: the reserve is driven by the binding
+ * axis (here the width), so the labels stay readable while the ring shrinks.
+ */
+export const LabelRoomTallNarrow: Story = {
+  name: 'Label Room — Tall Narrow 4-Digit (#1021)',
+  args: {
+    value: 2400,
+    minValue: 0,
+    maxValue: 3600,
+    showLabels: true,
+    primaryTickmarkInterval: 900,
+    secondaryTickmarkInterval: 300,
+    width: 160,
+    height: 400,
+  },
+};
+
+/**
+ * With `tickmarksInside` the labels live inside the ring, so no outside
+ * reserve is needed — the dial keeps the full legacy box at any label width.
+ */
+export const LabelRoomInsideLabels: Story = {
+  name: 'Label Room — Inside Labels Keep The Base Box (#1021)',
+  args: {
+    value: 2400,
+    minValue: 0,
+    maxValue: 3600,
+    showLabels: true,
+    tickmarksInside: true,
+    primaryTickmarkInterval: 900,
+    secondaryTickmarkInterval: 300,
+    width: 200,
+    height: 200,
+  },
+};

package/src/navigation-instruments/gauge-radial/gauge-radial.ts

@@ -2,7 +2,8 @@ import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 import componentStyle from './gauge-radial.css?inline';
 import {customElement} from '../../decorator.js';
-import {property} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
+import type {RadialFrame} from '../../svghelpers/radial-frame.js';
 import {AdviceType} from '../watch/advice.js';
 import {InstrumentState, Priority} from '../types.js';
 import {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';
@@ -43,6 +44,17 @@ export interface GaugeRadialAdvice {
   hinted: boolean;
 }
 
+/**
+ * Readout meta-row anchors in SVG units, derived from the legacy CSS
+ * percentages against the default 448 box (72% → 98.56, 63% → 58.24; the 180°
+ * sector's 60% of its 250.88-high crop → −73.472). Converted back to
+ * percentages against the actual frame so readouts stay put when the box
+ * grows for the label reserve (issue #1021).
+ */
+const READOUT_META_Y = 98.56;
+const READOUT_META_Y_NEEDLE = 58.24;
+const READOUT_META_Y_180 = -73.472;
+
 /**
  * `<obc-gauge-radial>` — Configurable radial gauge for generic numeric values.
  *
@@ -165,6 +177,15 @@ export class ObcGaugeRadial extends SetpointMixin(LitElement) {
   @property({type: String}) label = '';
   @property({type: String}) unit = '';
   @property({type: Number}) fractionDigits = 0;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter', reflect: true})
+  faceDiameter: number | undefined;
 
   private get sectorAngles(): {sweep: number; start: number} {
     switch (this.sector) {
@@ -212,6 +233,40 @@ export class ObcGaugeRadial extends SetpointMixin(LitElement) {
     );
   }
 
+  /** @internal */
+  @query('.gauge-radial-root') private _rootEl?: HTMLElement;
+
+  /**
+   * Re-anchor the %-positioned readouts against the frame the inner
+   * instrument actually rendered (the box grows when labels need room).
+   */
+  private _onFrameChanged = (e: Event): void => {
+    const frame = (e as CustomEvent<RadialFrame>).detail;
+    const root = this._rootEl;
+    if (!root || !(frame.height > 0)) {
+      return;
+    }
+    const pct = (anchorY: number) =>
+      `${(((anchorY - frame.y) / frame.height) * 100).toFixed(4)}%`;
+    root.style.setProperty('--readout-meta-top', pct(READOUT_META_Y));
+    root.style.setProperty(
+      '--readout-meta-top-needle',
+      pct(READOUT_META_Y_NEEDLE)
+    );
+    root.style.setProperty('--readout-meta-top-180', pct(READOUT_META_Y_180));
+    // When the frame lowered a crop for the label drop, the sector's static
+    // aspect-ratio no longer matches the viewBox — follow the frame so the
+    // dial keeps hugging the root box (contain behavior, issue #992).
+    if (frame.clipsAdjusted) {
+      root.style.setProperty(
+        '--gauge-radial-aspect',
+        `${frame.width} / ${frame.height}`
+      );
+    } else {
+      root.style.removeProperty('--gauge-radial-aspect');
+    }
+  };
+
   // Arrow form so `this` binds when passed as `.getAngle=${this.getAngle}`
   // to <obc-instrument-radial>. Do not convert to a method.
   getAngle = (v: number): number => {
@@ -304,6 +359,7 @@ export class ObcGaugeRadial extends SetpointMixin(LitElement) {
       <div
         class=${classMap({
           'gauge-radial-root': true,
+          'face-pinned': this.faceDiameter !== undefined,
           'type-needle': this.type === ObcGaugeRadialType.needle,
           'sector-180': this.sector === GaugeRadialSector.deg180,
           'sector-90-left': this.sector === GaugeRadialSector.deg90Left,
@@ -341,6 +397,8 @@ export class ObcGaugeRadial extends SetpointMixin(LitElement) {
           .clipLeft=${clips.left}
           .clipRight=${clips.right}
           .endLabelsMaxMin=${this.sector === GaugeRadialSector.deg180}
+          .faceDiameter=${this.faceDiameter}
+          @frame-changed=${this._onFrameChanged}
         >
         </obc-instrument-radial>
         ${this.renderReadouts()}

package/src/navigation-instruments/heading/heading.stories.ts

@@ -5,7 +5,13 @@ import {
   ObcHeading,
 } from './heading.js';
 import './heading.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {html} from 'lit';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {Priority} from '../types.js';
 
@@ -33,6 +39,11 @@ const meta: Meta<typeof ObcHeading> = {
   },
   argTypes: {
     width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
     courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
     headingSetpoint: {control: {type: 'range', min: 0, max: 360, step: 1}},
@@ -67,3 +78,83 @@ export const Enhanced: Story = {
     headingSetpoint: 311,
   },
 };
+
+/**
+ * Below the label-reserve cap (~200px for the NSWE + north-arrow decor) the
+ * frame reports `labelsHidden` and the instrument drops the labels and the
+ * north arrow instead of letting them clip — the same graceful degradation
+ * the tick-label instruments use (issue #1021).
+ */
+export const SmallContainerDegraded: Story = {
+  name: 'Small Container (160px, Labels + Arrow Hidden Past Cap)',
+  args: {
+    width: 160,
+  },
+};
+
+type SizingPlaygroundArgs = Partial<ObcHeading> & {
+  lockFaceDiameter?: boolean;
+};
+
+/**
+ * Interactive sizing playground: drag the dashed box's bottom-right corner to
+ * resize it. The first instrument is pinned to a fixed intrinsic size by the
+ * `faceDiameter` control, while the second adapts to the remaining flex
+ * space, reserving room for the NSWE labels and north arrow adaptively
+ * (issue #1021). Enable `lockFaceDiameter` to pin both to the same
+ * circumference. Related: *Sizing Playground* stories under Building
+ * Blocks/Watch, Building Blocks/Instrument Radial and Instruments/Gauge
+ * Radial.
+ */
+export const SizingPlayground: StoryObj<SizingPlaygroundArgs> = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 240,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {label: 'heading A', heading: 311},
+      {label: 'heading B', heading: 45},
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first instrument is pinned by the faceDiameter control; the second adapts to the remaining flex space. Enable lockFaceDiameter to pin both to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-heading
+                  .heading=${g.heading}
+                  .courseOverGround=${g.heading + 27}
+                  .showLabels=${true}
+                  .faceDiameter=${fd(index)}
+                ></obc-heading>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 680, height: 400}
+      )}
+    `;
+  },
+};

package/src/navigation-instruments/heading/heading.ts

@@ -5,6 +5,14 @@ import {Tickmark, TickmarkType} from '../watch/tickmark.js';
 import {arrow, ArrowStyle} from './arrow.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {
+  applyPinnedHostSize,
+  computeRadialFrame,
+  measureContainerPx,
+  NORTH_ARROW_WIDTH_PX,
+  NSWE_LABEL_WIDTH_PX,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 import {WatchCircleType} from '../watch/watch.js';
 import {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';
 import {Priority} from '../types.js';
@@ -58,6 +66,15 @@ export class ObcHeading extends LitElement {
   @property({type: Boolean}) showLabels: boolean = false;
   /** When true, labels and north arrow are placed inside the outer ring. */
   @property({type: Boolean}) tickmarksInside: boolean = false;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
 
   private _headingSp = new SetpointBundle({
     angularWraparound: true,
@@ -88,18 +105,30 @@ export class ObcHeading extends LitElement {
   // function is called on resize of the element
   private _resizeController = new ResizeController(this, {});
 
-  private getPadding() {
-    const size = Math.min(this.clientHeight, this.clientWidth);
-    const deltaWidth = 512 - size;
-    const steps = deltaWidth / 128;
-    let deltaPadding;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
+  /**
+   * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+   * plus, only while shown, the NSWE labels (both keep a constant on-screen
+   * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+   * replacing the former empirical `72 + delta(clientSize)` padding.
+   */
+  private getOutsideDecorPx(): number {
+    if (this.tickmarksInside) {
+      return 0;
     }
+    return NORTH_ARROW_WIDTH_PX + (this.showLabels ? NSWE_LABEL_WIDTH_PX : 0);
+  }
 
-    return 72 + deltaPadding;
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+  private _frame: RadialFrame | undefined;
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
 
   private get angleAdviceRaw(): AngleAdviceRaw[] {
@@ -140,22 +169,27 @@ export class ObcHeading extends LitElement {
       {angle: 270, type: TickmarkType.main},
     ];
 
-    const padding = this.getPadding();
-    const width = (176 + padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const frame = computeRadialFrame({
+      basePadding: 72,
+      labelWidthPx: this.getOutsideDecorPx(),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+    });
+    this._frame = frame;
+    const viewBox = frame.viewBox;
 
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${padding}
+          .arcFrame=${frame}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .watchCircleType=${WatchCircleType.single}
-          .showLabels=${this.showLabels}
+          .showLabels=${this.showLabels && !frame.labelsHidden}
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
-          .northArrow=${true}
+          .northArrow=${!frame.labelsHidden}
           .angleSetpoint=${this.headingSetpoint ?? undefined}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}