@celestia-island/hikari 0.55.108 → 0.55.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.108",
+  "version": "0.55.109",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkAdminShell.test.tsx

@@ -76,6 +76,17 @@ const setWidth = (w: number) => {
   window.dispatchEvent(new Event("resize"));
 };
 
+function paddingInner(container: HTMLElement): HTMLElement | null | undefined {
+  const viewport = container.querySelector(".hk-scroll-container-viewport")
+    ?? container.querySelector(".hk-scroll-container");
+  return viewport?.firstElementChild as HTMLElement | null | undefined;
+}
+
+function mobileInnerPadding(container: HTMLElement): string {
+  return paddingInner(container)?.style.padding ?? "";
+}
+
+
 function shellNode(
   props: Record<string, unknown>,
   slots: Record<string, unknown>,
@@ -234,4 +245,37 @@ describe("HkAdminShell", () => {
     expect(inner).toBeTruthy();
     expect(inner?.style.padding).toBe("2rem");
   });
+
+  it("drops the horizontal half of the content padding below the mobile breakpoint", async () => {
+    // Phone width: side gutters must vanish; vertical clearance survives.
+    // Asserted via longhands: happy-dom's shorthand parser collapses
+    // 3-value paddings, so style.padding cannot distinguish them here.
+    setWidth(390);
+    const mobileShell = mount(shellNode(
+      { navTitle: "Navigation", contentPadding: "2rem" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    const inner = paddingInner(mobileShell);
+    expect(inner?.style.paddingTop).toBe("2rem");
+    expect(inner?.style.paddingBottom).toBe("2rem");
+    expect(inner?.style.paddingLeft).toBe("0px");
+    expect(inner?.style.paddingRight).toBe("0px");
+
+    // Multi-value shorthand keeps per-side meaning: vertical survives,
+    // horizontal is zeroed (never the inverted "1rem 2rem 0").
+    const multi = mount(shellNode(
+      { navTitle: "Navigation", contentPadding: "1rem 2rem" },
+      { header: () => null, sidebar: NAV, content: CONTENT },
+    ));
+    const multiInner = paddingInner(multi);
+    expect(multiInner?.style.paddingTop).toBe("1rem");
+    expect(multiInner?.style.paddingBottom).toBe("1rem");
+    expect(multiInner?.style.paddingLeft).toBe("0px");
+    expect(multiInner?.style.paddingRight).toBe("0px");
+
+    // Crossing back to desktop restores the verbatim padding.
+    setWidth(1280);
+    await nextTick();
+    expect(mobileInnerPadding(mobileShell)).toBe("2rem");
+  });
 });

package/src/components/HkAdminShell.tsx

@@ -21,7 +21,11 @@ export const HkAdminShell = defineComponent({
     drawerPanelClass: { type: String, default: undefined },
     /** Content-area padding (inside the scroll viewport). Padding is
      *  applied to an inner wrapper rather than the scroll container so
-     *  card box-shadows are never clipped at the viewport edges. */
+     *  card box-shadows are never clipped at the viewport edges. Below
+     *  the mobile breakpoint the horizontal half is dropped
+     *  automatically (2026-10-03 user direction: on phones the content
+     *  area must span the full width for 2D panels and the 3D scene —
+     *  only the vertical clearance survives). */
     contentPadding: { type: String, default: "1.5rem" },
   },
   setup(props, { slots }) {
@@ -30,6 +34,22 @@ export const HkAdminShell = defineComponent({
     const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
     const sidebarOpen = ref(false);
 
+    // Content padding with the mobile side-gutter rule applied: desktop
+    // gets the value verbatim; below the breakpoint the horizontal
+    // tracks become zero while the vertical tracks survive. The CSS
+    // padding shorthand is parsed per side so multi-value values keep
+    // their meaning ("1rem 2rem" -> "1rem 0", not the invalid or
+    // inverted "1rem 2rem 0"). An empty value passes through untouched.
+    const mobileSideGutterFree = (value: string): string => {
+      const sides = value.trim().split(/\s+/).filter(Boolean);
+      if (sides.length === 0) return value;
+      const [top, , bottom] = sides;
+      return `${top} 0 ${bottom ?? top}`;
+    };
+    const contentStyle = computed(() => ({
+      padding: isDesktop.value ? props.contentPadding : mobileSideGutterFree(props.contentPadding),
+    }));
+
     const actionBar = provideActionBar();
 
     const toggleHamburger = () => {
@@ -80,7 +100,7 @@ export const HkAdminShell = defineComponent({
               {/* Padding lives INSIDE the scroll viewport (an inner
                   wrapper) so card box-shadows are not clipped at the
                   viewport edges. */}
-              <div style={{ padding: props.contentPadding }}>{slots.content?.()}</div>
+              <div style={contentStyle.value}>{slots.content?.()}</div>
             </HScrollContainer>
           </main>
 

package/src/components/HkButton.scss

@@ -47,9 +47,11 @@
    target; sm keeps its compact --text-xs. xs (2026-10-02, connection
    popover action row) shrinks the footprint further for inline popover
    footers: same --text-xs, tighter padding, 1.375rem min-height, and a
-   13px glyph (HkButton.tsx scales icon/suffix with the size) inside a
-   0.8125rem fixed box so the square-glyph contract keeps its rhythm at
-   the smaller scale. */
+   13px glyph produced entirely by the CSS chain below (the glyph box
+   drops to 0.8125rem and the inner .hk-icon span scales to 100% of it,
+   so the svg that always renders at HIcon's size={16} lands at 13px)
+   while the square-glyph contract keeps its rhythm at the smaller
+   scale. HkButton.tsx itself renders every size's glyph identically. */
 
 .hk-btn-xs {
   padding: var(--space-4) var(--space-8);