gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 10:24:23 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

feat(breadcrumb_row): improve badge fit on constrained width

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 13:33:33 +02:00
parent 9f274883e3
commit bd81db4117
No known key found for this signature in database
3 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
apps/client/src/widgets/Breadcrumb.css
View File

@ -4,6 +4,37 @@
min-height: 30px;
align-items: center;
padding: 10px;
container-type: inline-size;
@container (max-width: 500px) {
.breadcrumb-badges {
flex-shrink: 0;
>* {
flex-shrink: 0;
width: 18px;
}
.dropdown {
button {
flex-shrink: 0;
}
}
.breadcrumb-badge {
flex-shrink: 0;
padding: 0 2px;
>* {
text-overflow: clip;
}
.text {
display: none;
}
}
}
}
}
body.experimental-feature-new-layout .breadcrumb-row {

2
apps/client/src/widgets/BreadcrumbBadges.css
View File

@ -16,7 +16,7 @@
padding: 2px 6px;
border-radius: var(--badge-radius);
font-size: 0.75em;
background-color: var(--color, var(--badge-background-color));
background-color: var(--color, transparent);
color: white;
min-width: 0;
flex-shrink: 1;

2
apps/client/src/widgets/BreadcrumbBadges.tsx
View File

@ -103,7 +103,7 @@ function Badge({ icon, className, text, tooltip, onClick, href }: BadgeProps) {
const content = <>
{icon && <><Icon icon={icon} />&nbsp;</>}
{text}
<span class="text">{text}</span>
</>;
return (