Adjust playerbar size

packages/renderer/src/app.tsx

@@ -54,9 +54,9 @@ export const App = () => {
           fontSizes: {
             lg: 16,
             md: 14,
-            sm: 13,
+            sm: 12,
             xl: 18,
-            xs: 12,
+            xs: 10,
           },
           other: {},
           spacing: {
@@ -72,7 +72,7 @@ export const App = () => {
           autoClose={1500}
           position="bottom-right"
           style={{
-            marginBottom: '90px',
+            marginBottom: '85px',
             opacity: '.8',
             userSelect: 'none',
             width: '250px',

packages/renderer/src/features/player/components/left-controls.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Center, Group } from '@mantine/core';
+import { Center } from '@mantine/core';
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
 import { RiArrowUpSLine, RiDiscLine } from 'react-icons/ri';
 import { generatePath, Link } from 'react-router-dom';
@@ -26,15 +26,15 @@ const ImageWrapper = styled.div`
 const MetadataStack = styled(motion.div)`
   display: flex;
   flex-direction: column;
-  gap: 0.1rem;
+  gap: 0;
   justify-content: center;
   width: 100%;
   overflow: hidden;
 `;
 
 const Image = styled(motion(Link))`
-  width: 70px;
+  width: 60px;
-  height: 70px;
+  height: 60px;
   filter: drop-shadow(0 0 5px rgb(0, 0, 0, 100%));
 
   ${fadeIn};
@@ -61,6 +61,7 @@ const LineItem = styled.div<{ $secondary?: boolean }>`
   max-width: 20vw;
   overflow: hidden;
   color: ${(props) => props.$secondary && 'var(--main-fg-secondary)'};
+  line-height: 1.3;
   white-space: nowrap;
   text-overflow: ellipsis;
 
@@ -114,26 +115,24 @@ export const LeftControls = () => {
                   </>
                 )}
 
-                <Group
+                <Button
-                  position="right"
+                  compact
-                  sx={{ position: 'absolute', right: 0, top: 0 }}
+                  opacity={0.8}
+                  radius={50}
+                  size="xs"
+                  sx={{ position: 'absolute', right: 2, top: 2 }}
+                  tooltip={{ label: 'Expand' }}
+                  variant="default"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setSidebar({ image: true });
+                  }}
                 >
-                  <Button
+                  <RiArrowUpSLine
-                    compact
+                    color="white"
-                    radius={0}
+                    size={20}
-                    size="xs"
+                  />
-                    variant="default"
+                </Button>
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setSidebar({ image: true });
-                    }}
-                  >
-                    <RiArrowUpSLine
-                      color="white"
-                      size={20}
-                    />
-                  </Button>
-                </Group>
               </Image>
             </ImageWrapper>
           )}

packages/renderer/src/features/sidebar/components/sidebar.tsx

@@ -27,7 +27,7 @@ import { SidebarItem } from './sidebar-item';
 
 const SidebarContainer = styled.div`
   height: 100%;
-  max-height: calc(100vh - 90px); // Account for and playerbar
+  max-height: calc(100vh - 85px); // Account for and playerbar
   user-select: none;
 `;
 
@@ -245,25 +245,24 @@ export const Sidebar = () => {
                   />
                 </Center>
               )}
-              <Group
+              <Button
-                position="right"
+                compact
-                sx={{ position: 'absolute', right: 0, top: 0 }}
+                opacity={0.8}
+                radius={100}
+                size="sm"
+                sx={{ position: 'absolute', right: 5, top: 5 }}
+                tooltip={{ label: 'Collapse' }}
+                variant="default"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setSidebar({ image: false });
+                }}
               >
-                <Button
+                <RiArrowDownSLine
-                  compact
+                  color="white"
-                  size="md"
+                  size={20}
-                  variant="default"
+                />
-                  onClick={(e) => {
+              </Button>
-                    e.preventDefault();
-                    setSidebar({ image: false });
-                  }}
-                >
-                  <RiArrowDownSLine
-                    color="white"
-                    size={20}
-                  />
-                </Button>
-              </Group>
             </ImageContainer>
           )}
         </AnimatePresence>

packages/renderer/src/layouts/default-layout.tsx

@@ -31,7 +31,7 @@ const Layout = styled.div`
   grid-template-areas:
     'main'
     'player';
-  grid-template-rows: 1fr 90px;
+  grid-template-rows: 1fr 85px;
   grid-template-columns: 1fr;
   gap: 0;
   height: 100%;