mirror of
https://github.com/unslothai/unsloth.git
synced 2026-08-16 04:13:54 +00:00
72a4638698
* Studio: stop the Images Train settings columns overlapping The Training settings grid stepped to three columns on a viewport breakpoint, but it lives in the run pane, which is whatever is left beside the 416px form column. At a 1060px window that pane is 278px wide, so each column was 77px while the run length cell needs 150px (66px number field + 6px gap + 78px unit select). The cell could not shrink into it either: fieldClass is a bare grid, whose implicit column is auto-sized, so the track froze at that 150px min-content and the unit select painted over the LoRA rank input beside it. The same overflow cut the labels, and Label's display is flex, where text-overflow does nothing, so truncate clipped mid-glyph instead of ellipsing. Size the columns off the pane's own width with a container query, keep a cell inside its column with grid-cols-1, and pair truncate with block on the label. * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
44 lines
1.8 KiB
Python
44 lines
1.8 KiB
Python
# SPDX-License-Identifier: AGPL-3.0-only
|
|
# Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
|
|
|
|
"""Layout contract for the Images -> Train "Training settings" grid.
|
|
|
|
The panel is a fraction of the window, so a viewport breakpoint put three columns
|
|
in a ~280px pane; and each cell was a bare `grid`, whose implicit column is
|
|
auto-sized and froze at its widest child's min-content, so the cell painted over
|
|
its neighbour instead of shrinking. Both fixes have to stay: the container query
|
|
keeps cells wide enough, grid-cols-1 keeps a cell inside its column if it ever
|
|
is not.
|
|
"""
|
|
|
|
from pathlib import Path
|
|
|
|
|
|
REPO = Path(__file__).resolve().parents[2]
|
|
PANEL_TSX = REPO / "studio/frontend/src/features/images/train/diffusion-train-panel.tsx"
|
|
|
|
|
|
def _source() -> str:
|
|
return PANEL_TSX.read_text(encoding = "utf-8")
|
|
|
|
|
|
def test_settings_cell_cannot_outgrow_its_grid_column():
|
|
assert 'const fieldClass = "grid grid-cols-1 min-w-0 gap-2";' in _source()
|
|
|
|
|
|
def test_settings_columns_key_off_the_pane_width_not_the_viewport():
|
|
source = _source()
|
|
|
|
# The run area declares itself the query container...
|
|
assert '<div className="@container flex flex-col gap-6">' in source
|
|
# ...and all three settings grids step up on ITS width. 324px fits two 150px
|
|
# cells plus the 24px gutter, 498px fits three.
|
|
assert source.count("@min-[324px]:grid-cols-2 @min-[498px]:grid-cols-3") == 3
|
|
# No viewport breakpoint left behind: that is what put 3 columns in a 280px pane.
|
|
assert "lg:grid-cols-3" not in source
|
|
|
|
|
|
def test_field_label_ellipses_instead_of_cutting_mid_glyph():
|
|
# Label's own display is flex and text-overflow does nothing on a flex
|
|
# container, so truncate only ellipses when paired with block.
|
|
assert '<Label className="block min-w-0 truncate text-xs">{children}</Label>' in _source()
|