Skip to content

💄 修复日志页统计条窄屏文字重叠 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
RenjiYuusei wants to merge 1 commit into from
Closed

💄 修复日志页统计条窄屏文字重叠 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/pages/options/routes/Logger/LoggerMobile.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,15 @@ describe("日志页面 - 移动端", () => {
expect(msg.className).not.toContain("truncate");
});

it("移动端范围/统计条竖向堆叠，统计与自动清理各自独占整行", () => {
renderPage();
const bar = screen.getByTestId("logger-stats-bar");
expect(bar.className).toContain("flex-col");
// 两组必须撑满整行:否则长文本会溢出自身盒子压到相邻分组上(窄屏文字重叠)
expect(screen.getByTestId("logger-stats-summary").className).toContain("w-full");
expect(screen.getByTestId("logger-clean-schedule").className).toContain("w-full");
});

it("仍渲染全部日志且筛选交互可用", () => {
renderPage();
expect(screen.getByText("retry timeout reached")).toBeTruthy();
Expand Down
21 changes: 15 additions & 6 deletions src/pages/options/routes/Logger/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,28 +216,37 @@ export default function Logger() {
</div>

{/* 范围 / 统计条 */}
<div className="flex items-center justify-between gap-2 min-h-[34px] px-4 py-1 md:py-0 shrink-0 border-b border-border bg-muted/40 text-xs">
<div className="flex items-center gap-2 min-w-0 text-fg-secondary">
<div
data-testid="logger-stats-bar"
className="flex flex-col gap-1 min-h-[34px] px-4 py-1.5 shrink-0 border-b border-border bg-muted/40 text-xs md:flex-row md:items-center md:justify-between md:gap-2 md:py-0"
>
<div
data-testid="logger-stats-summary"
className="flex w-full items-center gap-2 min-w-0 text-fg-secondary md:w-auto"
>
<span className="truncate font-mono">
{`${formatUnixTime(range.start / 1000)} → ${formatUnixTime(range.end / 1000)}`}
</span>
{isNow && (
<span className="rounded-full bg-primary-light px-1.5 py-0.5 text-[11px] font-medium text-primary">
<span className="shrink-0 whitespace-nowrap rounded-full bg-primary-light px-1.5 py-0.5 text-[11px] font-medium text-primary">
{t("logs:now")}
</span>
)}
{refreshInterval !== "off" && (
<span className="inline-flex items-center gap-1.5 rounded-full bg-success-bg px-1.5 py-0.5 text-[11px] font-medium text-success-fg">
<span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full bg-success-bg px-1.5 py-0.5 text-[11px] font-medium text-success-fg">
<span className="h-1.5 w-1.5 rounded-full bg-success" />
{`${t("logs:live")} · ${getIntervalLabel(refreshInterval, t)}`}
</span>
)}
<span className="text-muted-foreground">{"·"}</span>
<span className="shrink-0">
{`${t("logs:total_count", { count: logs.length })}，${t("logs:filtered_count", { count: filtered.length })}`}
{`${t("logs:total_count", { count: logs.length })} · ${t("logs:filtered_count", { count: filtered.length })}`}
</span>
</div>
<div className="flex items-center gap-1.5 shrink-0 text-muted-foreground">
<div
data-testid="logger-clean-schedule"
className="flex w-full flex-wrap items-center gap-1.5 text-muted-foreground md:w-auto md:flex-nowrap md:shrink-0"
>
<span>{t("logs:clean_schedule")}</span>
<input
type="number"
Expand Down
Loading