Sidebar: simplify flexbox grow layouts

This change fixed sidebar style issues on Safari.

Fixes: 03cad54e

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

@@ -1,4 +1,4 @@
-import {FC, ReactNode} from 'react';
+import {FC} from 'react';
 import {OverlayScrollbarsComponent} from 'overlayscrollbars-react';
 
 import DiskUsage from './DiskUsage';
@@ -15,15 +15,6 @@ 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
@@ -48,11 +39,10 @@ const Sidebar: FC = () => {
       <TagFilters />
       <TrackerFilters />
       <DiskUsage />
-      <BottomContainer>
-        <SidebarActions>
-          <ThemeSwitchButton />
-        </SidebarActions>
-      </BottomContainer>
+      <div style={{flexGrow: 1}} />
+      <SidebarActions>
+        <ThemeSwitchButton />
+      </SidebarActions>
     </OverlayScrollbarsComponent>
   );
 };

client/src/sass/components/_sidebar.scss

@@ -64,6 +64,7 @@
   }
 
   &__actions {
+    min-height: max-content;
     display: flex;
     padding: $spacing-unit * 1/5;
     justify-content: flex-start;