vrr/openclaw
2
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-11-06 16:26:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

fix(ui): Claw card names break one word per line on narrow cards (#179787)

Browse source 
* fix(ui): keep Claw card names readable on narrow cards

Co-authored-by: Patrick-Erichsen <20157849+Patrick-Erichsen@users.noreply.github.com>

* fix(ui): Claw card names break one word per line on narrow cards

Worked on by:
- @Patrick-Erichsen

Co-authored-by: Patrick-Erichsen <20157849+Patrick-Erichsen@users.noreply.github.com>
OpenClaw-Publication: 9011e0f1-8334-44e7-b0e8-cde15fa7ba6d

---------

Co-authored-by: Patrick-Erichsen <20157849+Patrick-Erichsen@users.noreply.github.com>
This commit is contained in:
RoboClaw 2026-10-22 08:45:19 +08:00 • committed by GitHub
parent f3fccd0a0f
commit 2b18fc8eb8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
ui/src/pages/agents-home/claws-catalog.e2e.test.ts
View file

@ -192,6 +192,15 @@ describe.skipIf(!browserAvailable)("Claws discovery and Add", () => {
.locator(".plugin-catalog-results__body")
.evaluate((element) => element.getBoundingClientRect().width);
expect(Math.abs(searchWidth - bodyWidth)).toBeLessThan(2);
// Four-column cards are too narrow to fit the name between the artwork and Add.
const titleRow = await page
.locator("[data-claws-featured] [data-claws-entry] .agents-home__claw-head")
.first()
.evaluate((head) => ({
head: head.getBoundingClientRect().width,
name: head.querySelector("h3")?.getBoundingClientRect().width ?? 0,
}));
expect(Math.abs(titleRow.head - titleRow.name)).toBeLessThan(1);
expect(await gateway.getRequests("claws.catalog.search")).toEqual(
expect.arrayContaining([
expect.objectContaining({

31
ui/src/styles/agents-home.css
View file

@ -14,6 +14,9 @@
.agents-home__claw-card {
position: relative;
/* Card width, not viewport width, decides the title row: multi-column grids
make cards narrow on laptop-sized screens. */
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 10px;
@ -43,12 +46,24 @@
position: relative;
z-index: 2;
display: grid;
grid-template-areas: "art identity add";
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: start;
gap: 8px;
pointer-events: none;
}
/* Narrow cards: give the name the full card width instead of the gap between
the artwork and Add, which otherwise breaks names one or two words per line. */
@container (max-width: 279px) {
.agents-home__claw-head {
grid-template-areas:
"art . add"
"identity identity identity";
align-items: center;
}
}
.agents-home__claw-head .btn {
position: relative;
z-index: 3;
@ -56,6 +71,7 @@
}
.agents-home__claw-art {
grid-area: art;
display: grid;
width: 36px;
height: 36px;
@ -77,19 +93,32 @@
}
.agents-home__claw-identity {
grid-area: identity;
min-width: 0;
}
.agents-home__claw-identity h3 {
display: -webkit-box;
margin: 0;
overflow-wrap: anywhere;
overflow: hidden;
overflow-wrap: break-word;
font-size: 15px;
line-height: 1.3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.agents-home__claw-identity span {
display: block;
overflow: hidden;
color: var(--muted);
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.agents-home__claw-add {
grid-area: add;
}
.agents-home__claw-summary {