align some styling

Author: oscabriel

apps/web/src/hooks/use-code-highlighter.ts

@@ -115,7 +115,7 @@ export const useCodeHighlighter = ({
 									"py-3",
 									"relative",
 									"shadow-none",
-									"text-base",
+									"text-sm",
 									"leading-[inherit]",
 									"text-[color:var(--code-foreground)]",
 									!expanded && "max-h-72",
@@ -133,7 +133,7 @@ export const useCodeHighlighter = ({
 									wrapped
 										? "whitespace-pre-wrap break-words"
 										: "whitespace-pre",
-									"text-base",
+									"text-sm",
 									"leading-[inherit]",
 									"text-[color:var(--code-foreground)]",
 								);
@@ -146,7 +146,7 @@ export const useCodeHighlighter = ({
 				console.error("Error highlighting code", error);
 				if (!cancelled) {
 					setHighlightedCode(
-						`<pre class="px-4 py-3 whitespace-pre text-base leading-[inherit] text-(--code-foreground)"><code class="text-base leading-[inherit]">${codeString}</code></pre>`,
+						`<pre class="px-4 py-3 whitespace-pre text-sm leading-[inherit] text-(--code-foreground)"><code class="text-sm leading-[inherit]">${codeString}</code></pre>`,
 					);
 				}
 			} finally {

apps/web/src/routes/chat/-components/chat-composer.tsx

@@ -18,7 +18,7 @@ export function ChatComposer({
 	enabledModels,
 }: ChatComposerProps) {
 	return (
-		<div className="shrink-0 border-t bg-background/95 px-4 py-4 backdrop-blur supports-backdrop-filter:bg-background/60 sm:px-6">
+		<div className="shrink-0 border-t bg-background/60 px-4 py-4 sm:px-6">
 			<div className="w-full">
 				<MessageInput
 					disabled={disabled}

apps/web/src/routes/settings/appearance.tsx

@@ -2,7 +2,6 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
 import { toast } from "sonner";
 import { ModeToggle } from "@/web/components/navigation/mode-toggle";
-import { Button } from "@/web/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -84,18 +83,22 @@ function AppearanceSettings() {
 					{chatWidthOptions.map((option) => {
 						const isActive = chatWidth === option.id;
 						return (
-							<Button
+							<button
 								key={option.id}
-								variant={isActive ? "secondary" : "ghost"}
-								className="flex h-auto w-full flex-col items-start gap-1 px-4 py-3 text-left"
+								type="button"
+								className={`flex w-full cursor-pointer flex-col gap-2 p-4 text-left ${
+									isActive
+										? "border bg-background/60 hover:bg-background/80"
+										: "hover:border hover:bg-muted/50"
+								}`}
 								onClick={() => handleChatWidthChange(option.id)}
 								disabled={updateChatWidthMutation.isPending}
 							>
 								<span className="font-medium text-sm">{option.label}</span>
 								<span className="text-muted-foreground text-xs">
 									{option.description}
 								</span>
-							</Button>
+							</button>
 						);
 					})}
 				</CardContent>