Browse Source

fix: wrap footer buttons in About section on narrow screens (#3234)

Maxim Madan 8 months ago
parent
commit
94ae4488f5
1 changed files with 7 additions and 4 deletions
  1. 7 4
      webview-ui/src/components/settings/About.tsx

+ 7 - 4
webview-ui/src/components/settings/About.tsx

@@ -58,16 +58,19 @@ export const About = ({ version, telemetrySetting, setTelemetrySetting, classNam
 					/>
 				</div>
 
-				<div className="flex items-center gap-2 mt-2">
-					<Button onClick={() => vscode.postMessage({ type: "exportSettings" })}>
+				<div className="flex flex-wrap items-center gap-2 mt-2">
+					<Button onClick={() => vscode.postMessage({ type: "exportSettings" })} className="w-28">
 						<Upload className="p-0.5" />
 						{t("settings:footer.settings.export")}
 					</Button>
-					<Button onClick={() => vscode.postMessage({ type: "importSettings" })}>
+					<Button onClick={() => vscode.postMessage({ type: "importSettings" })} className="w-28">
 						<Download className="p-0.5" />
 						{t("settings:footer.settings.import")}
 					</Button>
-					<Button variant="destructive" onClick={() => vscode.postMessage({ type: "resetState" })}>
+					<Button
+						variant="destructive"
+						onClick={() => vscode.postMessage({ type: "resetState" })}
+						className="w-28">
 						<TriangleAlert className="p-0.5" />
 						{t("settings:footer.settings.reset")}
 					</Button>