style: improve UI components and global layout styling

michasdev · michasdev · commit 2378c8ca2cc2 · 2026-04-18T18:54:00.000-03:00
diff --git a/apps/desktop/src/renderer/index.html b/apps/desktop/src/renderer/index.html
@@ -6,7 +6,7 @@
   <title>MildStack Desktop</title>
   <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
   <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" />
+    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; media-src 'self' blob:; connect-src 'self' http://localhost:* ws://localhost:*;" />
 </head>
 
 <body class="dark isolate bg-sidebar text-foreground relative flex min-h-svh flex-col">
diff --git a/apps/desktop/src/renderer/src/assets/main.css b/apps/desktop/src/renderer/src/assets/main.css
@@ -131,6 +131,7 @@
       translate: 0 0;
     }
   }
+
 }
 
 :root {
@@ -192,6 +193,7 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  border-color: var(--color-border);
 }
 
 .dark {
diff --git a/apps/desktop/src/renderer/src/main.tsx b/apps/desktop/src/renderer/src/main.tsx
@@ -3,9 +3,14 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router'
 import { router } from '@renderer/router'
+import { AnchoredToastProvider, ToastProvider } from '@renderer/components/ui/toast'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <RouterProvider router={router} />
+    <ToastProvider>
+      <AnchoredToastProvider>
+        <RouterProvider router={router} />
+      </AnchoredToastProvider>
+    </ToastProvider>
   </StrictMode>
 )
diff --git a/apps/desktop/src/renderer/src/shared/layout.tsx b/apps/desktop/src/renderer/src/shared/layout.tsx
@@ -3,7 +3,7 @@ import { Outlet } from "react-router"
 
 export const Layout = () => {
     return (
-        <div className="p-5">
+        <div className="max-w-[1440px] mx-auto p-5 relative">
             <Header />
             <div className="mt-5">
                 <Outlet />
diff --git a/apps/web/www/src/components/ui/card.tsx b/apps/web/www/src/components/ui/card.tsx
@@ -12,7 +12,7 @@ export function Card({
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
     className: cn(
-      "relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+      "relative flex flex-col rounded-2xl border border-border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
       className,
     ),
     "data-slot": "card",
@@ -32,7 +32,7 @@ export function CardFrame({
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
     className: cn(
-      "relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]",
+      "relative flex flex-col rounded-2xl border border-border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]",
       className,
     ),
     "data-slot": "card-frame",

Original file line number	Diff line number	Diff line change
`@@ -131,6 +131,7 @@`
`131`	`131`	`translate: 0 0;`
`132`	`132`	`}`
`133`	`133`	`}`
	`134`	`+`
`134`	`135`	`}`
`135`	`136`
`136`	`137`	`:root {`
`@@ -192,6 +193,7 @@ body {`
`192`	`193`	`text-rendering: optimizeLegibility;`
`193`	`194`	`-webkit-font-smoothing: antialiased;`
`194`	`195`	`-moz-osx-font-smoothing: grayscale;`
	`196`	`+ border-color: var(--color-border);`
`195`	`197`	`}`
`196`	`198`
`197`	`199`	`.dark {`