style: Adjust UI element and text sizes for improved responsiveness and visual consistency across various components.

surfsense_web/components/inference-params-editor.tsx

@@ -69,7 +69,7 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa
 		<div className="space-y-6 p-2 sm:p-0">
 			<div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr_auto] md:gap-3 items-end">
 				<div className="flex flex-col space-y-1">
-					<Label htmlFor="param-key" className="text-sm font-medium">
+					<Label htmlFor="param-key" className="text-xs sm:text-sm font-medium">
 						Parameter Key
 					</Label>
 					<Select value={selectedKey} onValueChange={setSelectedKey}>
@@ -87,7 +87,7 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa
 				</div>
 
 				<div className="flex flex-col space-y-1">
-					<Label htmlFor="param-value" className="text-sm font-medium">
+					<Label htmlFor="param-value" className="text-xs sm:text-sm font-medium">
 						Value
 					</Label>
 					<Input
@@ -100,11 +100,11 @@ export default function InferenceParamsEditor({ params, setParams }: InferencePa
 				</div>
 
 				<Button
-					className="w-full md:w-auto h-10 mt-0"
+					className="w-full md:w-auto h-9 sm:h-10 mt-0 text-xs sm:text-sm"
 					onClick={handleAdd}
 					disabled={!selectedKey || value === ""}
 				>
-					<Plus className="w-4 h-4 mr-2" /> Add Parameter
+					<Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4 mr-2" /> Add Parameter
 				</Button>
 			</div>
 

surfsense_web/components/new-chat/model-config-sidebar.tsx

@@ -184,7 +184,7 @@ export function ModelConfigSidebar({
 									<Bot className="size-5 text-primary" />
 								</div>
 								<div>
-									<h2 className="text-lg font-semibold">{getTitle()}</h2>
+									<h2 className="text-base sm:text-lg font-semibold">{getTitle()}</h2>
 									<div className="flex items-center gap-2 mt-0.5">
 										{isGlobal ? (
 											<Badge variant="secondary" className="gap-1 text-xs">
@@ -207,9 +207,10 @@ export function ModelConfigSidebar({
 								variant="ghost"
 								size="icon"
 								onClick={() => onOpenChange(false)}
-								className="rounded-xl hover:bg-destructive/10 hover:text-destructive"
+								className="h-8 w-8 rounded-full"
 							>
-								<X className="size-5" />
+								<X className="h-4 w-4" />
+								<span className="sr-only">Close</span>
 							</Button>
 						</div>
 

surfsense_web/components/new-chat/source-detail-panel.tsx

@@ -352,9 +352,9 @@ export function SourceDetailPanel({
 									size="icon"
 									variant="ghost"
 									onClick={() => onOpenChange(false)}
-									className="rounded-xl h-10 w-10 hover:bg-destructive/10 hover:text-destructive transition-colors"
+									className="h-8 w-8 rounded-full"
 								>
-									<X className="h-5 w-5" />
+									<X className="h-4 w-4" />
 									<span className="sr-only">Close</span>
 								</Button>
 							</div>

surfsense_web/components/shared/llm-config-form.tsx

@@ -156,8 +156,8 @@ export function LLMConfigForm({
 			<form onSubmit={form.handleSubmit(handleFormSubmit)} className="space-y-6">
 				{/* System Instructions & Citations Section */}
 				<div className="space-y-4">
-					<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-						<MessageSquareQuote className="h-4 w-4" />
+					<div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-muted-foreground">
+						<MessageSquareQuote className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
 						System Instructions
 					</div>
 
@@ -168,7 +168,7 @@ export function LLMConfigForm({
 						render={({ field }) => (
 							<FormItem>
 								<div className="flex items-center justify-between">
-									<FormLabel>Instructions for the AI</FormLabel>
+									<FormLabel className="text-xs sm:text-sm">Instructions for the AI</FormLabel>
 									{defaultInstructions && (
 										<Button
 											type="button"
@@ -177,7 +177,7 @@ export function LLMConfigForm({
 											onClick={() =>
 												field.onChange(defaultInstructions.default_system_instructions)
 											}
-											className="h-7 text-xs text-muted-foreground hover:text-foreground"
+											className="h-7 text-[10px] sm:text-xs text-muted-foreground hover:text-foreground"
 										>
 											Reset to Default
 										</Button>
@@ -187,11 +187,11 @@ export function LLMConfigForm({
 									<Textarea
 										placeholder="Enter system instructions for the AI..."
 										rows={6}
-										className="font-mono text-xs resize-none"
+										className="font-mono text-[11px] sm:text-xs resize-none"
 										{...field}
 									/>
 								</FormControl>
-								<FormDescription className="text-xs">
+								<FormDescription className="text-[10px] sm:text-xs">
 									Use {"{resolved_today}"} to include today's date dynamically
 								</FormDescription>
 								<FormMessage />
@@ -206,8 +206,8 @@ export function LLMConfigForm({
 						render={({ field }) => (
 							<FormItem className="flex items-center justify-between rounded-lg border p-3 bg-muted/30">
 								<div className="space-y-0.5">
-									<FormLabel className="text-sm font-medium">Enable Citations</FormLabel>
-									<FormDescription className="text-xs">
+									<FormLabel className="text-xs sm:text-sm font-medium">Enable Citations</FormLabel>
+									<FormDescription className="text-[10px] sm:text-xs">
 										Include [citation:id] references to source documents
 									</FormDescription>
 								</div>
@@ -223,8 +223,8 @@ export function LLMConfigForm({
 
 				{/* Model Configuration Section */}
 				<div className="space-y-4">
-					<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-						<Bot className="h-4 w-4" />
+					<div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-muted-foreground">
+						<Bot className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
 						Model Configuration
 					</div>
 
@@ -235,7 +235,7 @@ export function LLMConfigForm({
 							name="name"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="flex items-center gap-2">
+									<FormLabel className="flex items-center gap-2 text-xs sm:text-sm">
 										<Sparkles className="h-3.5 w-3.5 text-violet-500" />
 										Configuration Name
 									</FormLabel>
@@ -256,7 +256,7 @@ export function LLMConfigForm({
 							name="description"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="text-muted-foreground">
+									<FormLabel className="text-muted-foreground text-xs sm:text-sm">
 										Description
 										<Badge variant="outline" className="ml-2 text-[10px]">
 											Optional
@@ -277,7 +277,7 @@ export function LLMConfigForm({
 						name="provider"
 						render={({ field }) => (
 							<FormItem>
-								<FormLabel>LLM Provider</FormLabel>
+								<FormLabel className="text-xs sm:text-sm">LLM Provider</FormLabel>
 								<Select value={field.value} onValueChange={handleProviderChange}>
 									<FormControl>
 										<SelectTrigger className="transition-all focus:ring-violet-500/50">
@@ -315,7 +315,7 @@ export function LLMConfigForm({
 									name="custom_provider"
 									render={({ field }) => (
 										<FormItem>
-											<FormLabel>Custom Provider Name</FormLabel>
+											<FormLabel className="text-xs sm:text-sm">Custom Provider Name</FormLabel>
 											<FormControl>
 												<Input
 													placeholder="my-custom-provider"
@@ -337,7 +337,7 @@ export function LLMConfigForm({
 						name="model_name"
 						render={({ field }) => (
 							<FormItem className="flex flex-col">
-								<FormLabel>Model Name</FormLabel>
+								<FormLabel className="text-xs sm:text-sm">Model Name</FormLabel>
 								<Popover open={modelComboboxOpen} onOpenChange={setModelComboboxOpen}>
 									<PopoverTrigger asChild>
 										<FormControl>
@@ -410,7 +410,7 @@ export function LLMConfigForm({
 									</PopoverContent>
 								</Popover>
 								{selectedProvider?.example && (
-									<FormDescription className="text-xs">
+									<FormDescription className="text-[10px] sm:text-xs">
 										Example: {selectedProvider.example}
 									</FormDescription>
 								)}
@@ -426,7 +426,7 @@ export function LLMConfigForm({
 							name="api_key"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="flex items-center gap-2">
+									<FormLabel className="flex items-center gap-2 text-xs sm:text-sm">
 										<Key className="h-3.5 w-3.5 text-amber-500" />
 										API Key
 									</FormLabel>
@@ -438,7 +438,7 @@ export function LLMConfigForm({
 										/>
 									</FormControl>
 									{watchProvider === "OLLAMA" && (
-										<FormDescription className="text-xs">
+										<FormDescription className="text-[10px] sm:text-xs">
 											Ollama doesn't require auth — enter any value
 										</FormDescription>
 									)}
@@ -452,7 +452,7 @@ export function LLMConfigForm({
 							name="api_base"
 							render={({ field }) => (
 								<FormItem>
-									<FormLabel className="flex items-center gap-2">
+									<FormLabel className="flex items-center gap-2 text-xs sm:text-sm">
 										API Base URL
 										{selectedProvider?.apiBase && (
 											<Badge variant="secondary" className="text-[10px]">
@@ -510,8 +510,8 @@ export function LLMConfigForm({
 					<>
 						<Separator />
 						<div className="space-y-4">
-							<div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-								<Sparkles className="h-4 w-4" />
+							<div className="flex items-center gap-2 text-xs sm:text-sm font-medium text-muted-foreground">
+								<Sparkles className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
 								Advanced Parameters
 							</div>
 
@@ -542,19 +542,19 @@ export function LLMConfigForm({
 					)}
 				>
 					{onCancel && (
-						<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
+						<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting} className="text-xs sm:text-sm h-9 sm:h-10">
 							Cancel
 						</Button>
 					)}
-					<Button type="submit" disabled={isSubmitting} className="gap-2 min-w-[160px]">
+					<Button type="submit" disabled={isSubmitting} className="gap-2 min-w-[140px] sm:min-w-[160px] text-xs sm:text-sm h-9 sm:h-10">
 						{isSubmitting ? (
 							<>
-								<Loader2 className="h-4 w-4 animate-spin" />
+								<Loader2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 animate-spin" />
 								{mode === "edit" ? "Updating..." : "Creating..."}
 							</>
 						) : (
 							<>
-								{!compact && <Rocket className="h-4 w-4" />}
+								{!compact && <Rocket className="h-3.5 w-3.5 sm:h-4 sm:w-4" />}
 								{submitLabel ?? (mode === "edit" ? "Update Configuration" : "Create Configuration")}
 							</>
 						)}

surfsense_web/components/sources/ConnectorsTab.tsx

@@ -81,7 +81,7 @@ export function ConnectorsTab({ searchSpaceId }: ConnectorsTabProps) {
 						className="w-full"
 					>
 						<div className="flex items-center justify-between space-x-4 p-4">
-							<h3 className="text-xl font-semibold">{t(category.title)}</h3>
+							<h3 className="text-lg sm:text-xl font-semibold">{t(category.title)}</h3>
 							<CollapsibleTrigger asChild>
 								<Button variant="ghost" size="sm" className="w-9 p-0 hover:bg-muted">
 									<motion.div

surfsense_web/components/sources/DocumentUploadTab.tsx

@@ -217,7 +217,7 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 		>
 			<Alert>
 				<Info className="h-4 w-4" />
-				<AlertDescription>{t("file_size_limit")}</AlertDescription>
+				<AlertDescription className="text-xs sm:text-sm">{t("file_size_limit")}</AlertDescription>
 			</Alert>
 
 			<Card className="relative overflow-hidden">
@@ -249,7 +249,7 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 							>
 								<Upload className="h-12 w-12 text-muted-foreground" />
 								<div className="text-center">
-									<p className="text-lg font-medium">{t("drag_drop")}</p>
+									<p className="text-base sm:text-lg font-medium">{t("drag_drop")}</p>
 									<p className="text-sm text-muted-foreground mt-1">{t("or_browse")}</p>
 								</div>
 							</motion.div>
@@ -284,8 +284,10 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 							<CardHeader>
 								<div className="flex items-center justify-between">
 									<div>
-										<CardTitle>{t("selected_files", { count: files.length })}</CardTitle>
-										<CardDescription>
+										<CardTitle className="text-lg sm:text-2xl">
+											{t("selected_files", { count: files.length })}
+										</CardTitle>
+										<CardDescription className="text-xs sm:text-sm">
 											{t("total_size")}: {formatFileSize(getTotalFileSize())}
 										</CardDescription>
 									</div>
@@ -313,7 +315,9 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 												<div className="flex items-center gap-3 flex-1 min-w-0">
 													<FileType className="h-5 w-5 text-muted-foreground flex-shrink-0" />
 													<div className="flex-1 min-w-0">
-														<p className="font-medium truncate">{file.name}</p>
+														<p className="text-sm sm:text-base font-medium truncate">
+															{file.name}
+														</p>
 														<div className="flex items-center gap-2 mt-1">
 															<Badge variant="secondary" className="text-xs">
 																{formatFileSize(file.size)}
@@ -361,7 +365,7 @@ export function DocumentUploadTab({ searchSpaceId }: DocumentUploadTabProps) {
 									animate={{ opacity: 1, y: 0 }}
 								>
 									<Button
-										className="w-full py-6 text-base font-medium"
+										className="w-full py-4 sm:py-6 text-sm sm:text-base font-medium"
 										onClick={handleUpload}
 										disabled={isUploading || files.length === 0}
 									>

surfsense_web/components/sources/YouTubeTab.tsx

@@ -125,17 +125,19 @@ export function YouTubeTab({ searchSpaceId }: YouTubeTabProps) {
 		>
 			<Card>
 				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
+					<CardTitle className="text-lg sm:text-2xl flex items-center gap-2">
 						<IconBrandYoutube className="h-5 w-5" />
 						{t("title")}
 					</CardTitle>
-					<CardDescription>{t("subtitle")}</CardDescription>
+					<CardDescription className="text-xs sm:text-sm">{t("subtitle")}</CardDescription>
 				</CardHeader>
 
 				<CardContent>
 					<div className="space-y-4">
 						<div className="space-y-2">
-							<Label htmlFor="video-input">{t("label")}</Label>
+							<Label htmlFor="video-input" className="text-sm sm:text-base">
+								{t("label")}
+							</Label>
 							<TagInput
 								id="video-input"
 								tags={videoTags}
@@ -212,14 +214,17 @@ export function YouTubeTab({ searchSpaceId }: YouTubeTabProps) {
 				<CardFooter className="flex justify-between">
 					<Button
 						variant="outline"
+						size="sm"
 						onClick={() => router.push(`/dashboard/${searchSpaceId}/documents`)}
+						className="text-xs sm:text-sm"
 					>
 						{t("cancel")}
 					</Button>
 					<Button
 						onClick={handleSubmit}
 						disabled={isSubmitting || videoTags.length === 0}
-						className="relative overflow-hidden"
+						size="sm"
+						className="relative overflow-hidden text-xs sm:text-sm"
 					>
 						{isSubmitting ? (
 							<>