diff --git a/ApiCore-Frontend/src/components/hive/hive-card.spec.tsx b/ApiCore-Frontend/src/components/hive/hive-card.spec.tsx index ed618dc..29fa0e5 100644 --- a/ApiCore-Frontend/src/components/hive/hive-card.spec.tsx +++ b/ApiCore-Frontend/src/components/hive/hive-card.spec.tsx @@ -231,6 +231,29 @@ describe("HiveCard", () => { expect(buttons?.parentElement).toBe(column.parentElement); }); + it("starts the outline panel below the title or focus bar, so it never covers „Zurück“", async () => { + // jsdom has no layout: every overlay reports 60 px, the observer measures once. + vi.stubGlobal( + "ResizeObserver", + class { + observe() {} + disconnect() {} + }, + ); + const height = vi.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(60); + try { + renderCard(); + await userEvent.click(await screen.findByRole("button", { name: "Aufbau als Liste" })); + + const column = screen.getByTestId("hive-outline-scroll").parentElement!.parentElement!.parentElement!; + // 60 px overlay + 12 px from the stage top + 8 px gap. + expect(column).toHaveStyle({ paddingTop: "80px" }); + } finally { + height.mockRestore(); + vi.unstubAllGlobals(); + } + }); + it("shows title and facts as a frosted overlay and the actions as glass buttons on the stage", async () => { renderCard(); await screen.findByRole("img", { name: /Beute mit/ }); diff --git a/ApiCore-Frontend/src/components/hive/hive-card.tsx b/ApiCore-Frontend/src/components/hive/hive-card.tsx index a5ea056..744a1f7 100644 --- a/ApiCore-Frontend/src/components/hive/hive-card.tsx +++ b/ApiCore-Frontend/src/components/hive/hive-card.tsx @@ -157,6 +157,8 @@ function HiveCardContent({ colonyId, colony, mode = "view", onOpsChange, initial /** Top: title panel or focus bar (placed 12 px from the top). Bottom: the button column (8 px padding). */ const TOP_OVERLAY_OFFSET_PX = 12; const BOTTOM_OVERLAY_OFFSET_PX = 8; +/** Gap between the top overlay and the outline panel (the column's p-2). */ +const OUTLINE_GAP_PX = 8; /** Heights of the overlays over the stage, so the 3D camera keeps the model clear of them. */ function useOverlayInsets(top: RefObject, bottom: RefObject) { @@ -349,8 +351,12 @@ function HiveCardBody({ colonyId, setup, catalog, canEdit, mode, onOpsChange, in )} {/* One column for the outline panel and the button bar: the panel always ends above the - buttons, however they wrap. DOM order keeps the buttons before the tree (tab order). */} -
+ buttons, however they wrap, and starts below the title or focus bar (on a phone it + would cover „Zurück“). DOM order keeps the buttons before the tree (tab order). */} +
{past ? (