Fix: dialogs clipping under the navbar and uneven Compare spacing

This commit is contained in:
Mark Greene committed 2026-10-10 11:16:36 +13:00
1 parent 2e10052732
commit 2288c089e8
5 files changed
+12 -5

No files matched your search

@@ -1,5 +1,6 @@
import { PlusIcon, TrashIcon } from "@radix-ui/react-icons";
import { Button, Dialog, Flex, SegmentedControl } from "@radix-ui/themes";
import { DIALOG_MAX_HEIGHT } from "../../constants/dialog";
import { api } from "../../core/blitzkit/api";
import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
import { useLocale } from "../../hooks/useLocale";
@@ -36,11 +37,11 @@ export function Controls({
</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Content maxHeight={DIALOG_MAX_HEIGHT}>
<Dialog.Title align="center">
{strings.website.tools.compare.actions.add.title}
</Dialog.Title>
<Dialog.Description align="center">
<Dialog.Description align="center" mb="4">
{strings.website.tools.compare.actions.add.description}
</Dialog.Description>
@@ -1,6 +1,7 @@
import { ExternalLinkIcon, LoopIcon, TrashIcon } from "@radix-ui/react-icons";
import { Dialog, Flex, IconButton } from "@radix-ui/themes";
import { useState } from "react";
import { DIALOG_MAX_HEIGHT } from "../../constants/dialog";
import { api } from "../../core/blitzkit/api";
import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
import { useLocale } from "../../hooks/useLocale";
@@ -43,7 +44,7 @@ export function TankControl({ index, slug }: TankControlProps) {
</IconButton>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Content maxHeight={DIALOG_MAX_HEIGHT}>
<Dialog.Title align="center">
{strings.website.common.tank_search.swap_dialog_title}
</Dialog.Title>
@@ -27,6 +27,7 @@ import {
Tooltip,
} from "@radix-ui/themes";
import { Suspense, useState, type RefObject } from "react";
import { DIALOG_MAX_HEIGHT } from "../../../../../constants/dialog";
import { Pose, poseEvent } from "../../../../../core/blitzkit/pose";
import { useEquipment } from "../../../../../hooks/useEquipment";
import { useFullScreen } from "../../../../../hooks/useFullScreen";
@@ -485,7 +486,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Content maxHeight={DIALOG_MAX_HEIGHT}>
<Dialog.Title align="center">
{strings.website.common.tank_search.select_dialog_title}
</Dialog.Title>
+3
View File
@@ -0,0 +1,3 @@
import { NAVBAR_HEIGHT } from "./navbar";
export const DIALOG_MAX_HEIGHT = `calc(100svh - 2 * (${NAVBAR_HEIGHT}px + var(--space-4)))`;
@@ -24,6 +24,7 @@ import { ModuleButton } from "../../../../components/ModuleButtons/ModuleButton"
import { PageWrapper } from "../../../../components/PageWrapper";
import { ScreenshotButton } from "../../../../components/ScreenshotButton";
import { TankSearch } from "../../../../components/TankSearch";
import { DIALOG_MAX_HEIGHT } from "../../../../constants/dialog";
import { api } from "../../../../core/blitzkit/api";
import { curateMixer } from "../../../../core/blitzkit/curateMixer";
import {
@@ -117,7 +118,7 @@ function ModuleChooser({
</Button>
</Dialog.Trigger>
<Dialog.Content>
<Dialog.Content maxHeight={DIALOG_MAX_HEIGHT}>
<Dialog.Title>
{strings.website.common.tank_search.select_dialog_title}
</Dialog.Title>