From 99a970960586cd72a87fb95238137a5256d53315 Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 15:01:25 +0200
Subject: [PATCH] style: left-align support button, right-align view mode
 buttons

---
 src/components/BookmarkList.tsx | 78 +++++++++++++++++----------------
 src/styles/layout/sidebar.css   |  9 +++-
 2 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/components/BookmarkList.tsx b/src/components/BookmarkList.tsx
index 28494107..91230305 100644
--- a/src/components/BookmarkList.tsx
+++ b/src/components/BookmarkList.tsx
@@ -155,46 +155,50 @@ export const BookmarkList: React.FC<BookmarkListProps> = ({
         </div>
       )}
       <div className="view-mode-controls">
-        <IconButton
-          icon={faHeart}
-          onClick={() => navigate('/support')}
-          title="Support Boris"
-          ariaLabel="Support"
-          variant="ghost"
-          style={{ color: friendsColor }}
-        />
-        {onRefresh && (
+        <div className="view-mode-left">
           <IconButton
-            icon={faRotate}
-            onClick={onRefresh}
-            title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
-            ariaLabel="Refresh bookmarks"
+            icon={faHeart}
+            onClick={() => navigate('/support')}
+            title="Support Boris"
+            ariaLabel="Support"
             variant="ghost"
-            disabled={isRefreshing}
-            spin={isRefreshing}
+            style={{ color: friendsColor }}
           />
-        )}
-        <IconButton
-          icon={faList}
-          onClick={() => onViewModeChange('compact')}
-          title="Compact list view"
-          ariaLabel="Compact list view"
-          variant={viewMode === 'compact' ? 'primary' : 'ghost'}
-        />
-        <IconButton
-          icon={faThLarge}
-          onClick={() => onViewModeChange('cards')}
-          title="Cards view"
-          ariaLabel="Cards view"
-          variant={viewMode === 'cards' ? 'primary' : 'ghost'}
-        />
-        <IconButton
-          icon={faImage}
-          onClick={() => onViewModeChange('large')}
-          title="Large preview view"
-          ariaLabel="Large preview view"
-          variant={viewMode === 'large' ? 'primary' : 'ghost'}
-        />
+        </div>
+        <div className="view-mode-right">
+          {onRefresh && (
+            <IconButton
+              icon={faRotate}
+              onClick={onRefresh}
+              title={lastFetchTime ? `Refresh bookmarks (updated ${formatDistanceToNow(lastFetchTime, { addSuffix: true })})` : 'Refresh bookmarks'}
+              ariaLabel="Refresh bookmarks"
+              variant="ghost"
+              disabled={isRefreshing}
+              spin={isRefreshing}
+            />
+          )}
+          <IconButton
+            icon={faList}
+            onClick={() => onViewModeChange('compact')}
+            title="Compact list view"
+            ariaLabel="Compact list view"
+            variant={viewMode === 'compact' ? 'primary' : 'ghost'}
+          />
+          <IconButton
+            icon={faThLarge}
+            onClick={() => onViewModeChange('cards')}
+            title="Cards view"
+            ariaLabel="Cards view"
+            variant={viewMode === 'cards' ? 'primary' : 'ghost'}
+          />
+          <IconButton
+            icon={faImage}
+            onClick={() => onViewModeChange('large')}
+            title="Large preview view"
+            ariaLabel="Large preview view"
+            variant={viewMode === 'large' ? 'primary' : 'ghost'}
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/src/styles/layout/sidebar.css b/src/styles/layout/sidebar.css
index 140415ee..2013ed7c 100644
--- a/src/styles/layout/sidebar.css
+++ b/src/styles/layout/sidebar.css
@@ -81,7 +81,14 @@
 .view-mode-controls {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.view-mode-left,
+.view-mode-right {
+  display: flex;
+  align-items: center;
   gap: 0.5rem;
 }