Sidebar: make theme button always at the bottom

client/src/javascript/components/sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import {FC} from 'react';
+import {FC, ReactNode} from 'react';
 import {OverlayScrollbarsComponent} from 'overlayscrollbars-react';
 
 import DiskUsage from './DiskUsage';
@@ -15,6 +15,15 @@ import ThemeSwitchButton from './ThemeSwitchButton';
 import TrackerFilters from './TrackerFilters';
 import TransferData from './TransferData';
 
+const BottomContainer: FC<{children: ReactNode}> = ({children}: {children: ReactNode}) => {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
+      <div style={{flexGrow: 1}} />
+      {children}
+    </div>
+  );
+};
+
 const Sidebar: FC = () => {
   return (
     <OverlayScrollbarsComponent
@@ -39,9 +48,11 @@ const Sidebar: FC = () => {
       <TagFilters />
       <TrackerFilters />
       <DiskUsage />
-      <SidebarActions>
-        <ThemeSwitchButton />
-      </SidebarActions>
+      <BottomContainer>
+        <SidebarActions>
+          <ThemeSwitchButton />
+        </SidebarActions>
+      </BottomContainer>
     </OverlayScrollbarsComponent>
   );
 };

client/src/sass/components/_sidebar.scss

@@ -13,6 +13,11 @@
     z-index: 2;
     transition: transform 0.2s;
 
+    .os-content {
+      display: flex;
+      flex-direction: column;
+    }
+
     @media (max-width: 720px) {
       transform: translateX(-120px);
     }