fix: improve styling of messsges

src/components/UI/Footer.tsx

@@ -6,7 +6,7 @@ const Footer = React.forwardRef<HTMLElement, FooterProps>(
   ({ className, ...props }, ref) => {
     return (
       <footer
-        className={`flex flex- justify-center p-2 ${className}`}
+        className={`flex mt-auto justify-center p-2 ${className}`}
         style={{
           backgroundColor: "var(--backgroundPrimary)",
           color: "var(--textPrimary)",

src/components/UI/Sidebar/sidebarButton.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@components/UI/Button.tsx";
 import type { LucideIcon } from "lucide-react";
+import type { JSX } from "react";
 
 export interface SidebarButtonProps {
   label: string;
@@ -20,10 +21,10 @@ export const SidebarButton = ({
     onClick={onClick}
     variant={active ? "subtle" : "ghost"}
     size="sm"
-    className="w-full justify-start gap-2"
+    className="flex gap-2"
   >
     {Icon && <Icon size={16} />}
     {element && element}
-    {label}
+    <span className="flex flex-1 justify-start flex-shrink-0">{label}</span>
   </Button>
 );