From 94ae4488f54f86186fabc951b4b59c6ff115ba8d Mon Sep 17 00:00:00 2001
From: Maxim Madan <135958728+ecmasx@users.noreply.github.com>
Date: Wed, 7 May 2025 00:08:19 +0300
Subject: [PATCH] fix: wrap footer buttons in About section on narrow screens
 (#3234)

---
 webview-ui/src/components/settings/About.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/webview-ui/src/components/settings/About.tsx b/webview-ui/src/components/settings/About.tsx
index 9508dab60f..491e9838b0 100644
--- a/webview-ui/src/components/settings/About.tsx
+++ b/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>