style: improve layout and responsiveness of custom toolbar

src/app/(main)/home/page.tsx

@@ -7,11 +7,13 @@ export default function Home() {
   const { data } = useGetApiUserMe();
 
   return (
-    <div className='max-h-full'>
+    <div className='max-h-full flex justify-center items-center'>
+      <div className='w-full sm:w-[90%]'>
         <Calendar
           userId={data?.data.user?.id}
           height='calc(100svh - 50px - (var(--spacing) * 2 * 5))'
         />
       </div>
+    </div>
   );
 }

src/components/custom-toolbar.css

@@ -1,10 +1,14 @@
 /* Container der Toolbar */
 .custom-toolbar {
   display: flex;
-  flex-direction: column;
+  gap: 8px;
-  gap: 12px;
   padding: calc(var(--spacing) * 2);
   padding-left: calc(50px + var(--spacing));
+
+  @media (max-width: 870px) {
+    padding-left: 0;
+    flex-direction: column;
+  }
   box-shadow: none;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
@@ -25,6 +29,7 @@
   display: flex;
   gap: 8px;
   justify-content: center;
+  align-items: center;
 }
 
 .custom-toolbar .navigation-controls button {
@@ -77,6 +82,8 @@
   border-radius: 11px;
   justify-items: center;
   align-items: center;
+  display: flex;
+  gap: 8px;
 }
 
 .custom-toolbar .navigation-controls .handleWeek button {
@@ -93,6 +100,9 @@
   padding: 0 8px;
   border-radius: 11px;
   justify-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .right-section .datepicker-box {
@@ -100,8 +110,12 @@
   background-color: #c6c6c6;
   height: 36px;
   border-radius: 11px;
-  font-size: 12px;
+  font-size: 14px;
   align-self: center;
+  font-family: 'Varela Round', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .datepicker {

src/components/custom-toolbar.tsx

@@ -171,12 +171,9 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({
   };
 
   return (
-    <div
+    <div className='custom-toolbar'>
-      className='custom-toolbar'
-      style={{ display: 'flex', flexDirection: 'initial', gap: '8px' }}
-    >
       <div className='view-change'>
-        <div className='view-switcher' style={{ display: 'flex', gap: '8px' }}>
+        <div className='view-switcher'>
           <Button
             //className='hover:bg-orange-600 hover:text-white'
             type='submit'