gsadmin/Firelink
1
0
Fork 0
mirror of https://github.com/nimbold/Firelink.git synced 2026-07-26 12:08:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): stabilize side-aware RTL layout

Browse Source 
Keep download columns in their default order, mirror sidebar badges by physical side, and reserve titlebar space for desktop controls.

Refs #17
This commit is contained in:
NimBold
2026-07-19 02:53:37 +03:30
parent 60f13f756c
commit 79cd9f0ed1
2 changed files with 52 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Sidebar.tsx
+4 -4
View File
@@ -126,7 +126,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
onClick={() => onSelectFilter(filter)}
>
<Icon className="w-[18px] h-[18px] me-3 shrink-0" strokeWidth={isSelected ? 2.5 : 2} />
<span className="truncate">{label}</span>
<span className="sidebar-nav-label truncate">{label}</span>
{getCount(filter) > 0 && (
<span className="sidebar-count ms-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-bold">
{getCount(filter)}
@@ -208,7 +208,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
className="sidebar-nav-item group flex w-full items-center text-[13px] text-start cursor-default font-medium"
>
<List className="w-[18px] h-[18px] me-3 shrink-0" strokeWidth={isSelected ? 2.5 : 2} />
<span className="truncate">{queue.name}</span>
<span className="sidebar-nav-label truncate">{queue.name}</span>
{getCount(filterId) > 0 && (
<span className="sidebar-count ms-auto min-w-5 px-1.5 py-0.5 rounded-full text-center text-[10px] leading-none font-bold shrink-0">
{getCount(filterId)}
@@ -228,7 +228,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
className="sidebar-nav-item group flex w-full items-center text-[13px] text-start cursor-default font-medium"
>
<Icon className="w-[18px] h-[18px] me-3 shrink-0" strokeWidth={isSelected ? 2.5 : 2} />
<span>{label}</span>
<span className="sidebar-nav-label">{label}</span>
</button>
);
};
@@ -341,7 +341,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
className="sidebar-nav-item sidebar-settings-button group flex w-full items-center text-[13px] text-start cursor-default font-medium transition-colors"
>
<Settings className={`w-[18px] h-[18px] me-3 shrink-0 ${activeView === 'settings' ? 'text-white' : 'text-text-muted'}`} strokeWidth={activeView === 'settings' ? 2.5 : 2} />
<span>{t($ => $.navigation.settings)}</span>
<span className="sidebar-nav-label">{t($ => $.navigation.settings)}</span>
</button>
</div>
src/index.css
+48
View File
@@ -1112,6 +1112,14 @@ html[data-list-density="relaxed"] {
right: 124px;
}
.app-sidebar-shell--left .sidebar-nav-item {
direction: ltr;
}
.app-sidebar-shell--right .sidebar-nav-item {
direction: rtl;
}
.app-statusbar {
height: 26px;
font-size: 10px;
@@ -1686,6 +1694,11 @@ html[data-list-density="relaxed"] {
background: hsl(var(--statusbar-bg));
}
.app-workspace--custom-window-controls .main-titlebar {
padding-left: 160px;
padding-right: 160px;
}
.app-workspace--sidebar-collapsed .main-titlebar {
padding-left: 124px;
padding-right: 18px;
@@ -1860,6 +1873,7 @@ html[data-list-density="relaxed"] {
.download-table-header,
.download-row {
direction: ltr;
box-sizing: border-box;
width: 100%;
min-width: 0;
@@ -2410,6 +2424,40 @@ html[dir="rtl"] .sidebar-inner .mr-3 {
-2px 0 10px hsl(0 0% 0% / 0.20);
}
.app-sidebar-shell--left .sidebar-toggle-button {
inset-inline-start: auto;
inset-inline-end: auto;
left: auto;
right: 12px;
}
.app-sidebar-shell--right .sidebar-toggle-button {
inset-inline-start: auto;
inset-inline-end: auto;
left: 12px;
right: auto;
}
.app-sidebar-shell--left .sidebar-nav-item .sidebar-count {
margin-left: auto;
margin-right: 0;
}
.app-sidebar-shell--right .sidebar-nav-item .sidebar-count {
margin-left: 0;
margin-right: auto;
}
.app-sidebar-shell--left .sidebar-nav-item > svg {
margin-left: 0;
margin-right: 0.75rem;
}
.app-sidebar-shell--right .sidebar-nav-item > svg {
margin-left: 0.75rem;
margin-right: 0;
}
html[dir="rtl"] .mac-switch::after {
left: auto;
right: 2px;