From 5f1a4db7e1a9a923e6f256f0cbf610456dbc34ba Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Tue, 25 Nov 2025 17:37:58 +0100
Subject: [PATCH] fix regression that broke some ui spacing

---
 src/components/Flex.tsx                                      | 4 +++-
 src/components/settings/tabs/themes/ThemeCard.tsx            | 2 +-
 src/plugins/_api/badges/index.tsx                            | 4 ++--
 src/plugins/customRPC/index.tsx                              | 2 +-
 src/plugins/decor/ui/components/DecorSection.tsx             | 2 +-
 src/plugins/decor/ui/modals/GuidelinesModal.tsx              | 2 +-
 .../components/RolesAndUsersPermissions.tsx                  | 2 +-
 src/plugins/reverseImageSearch/index.tsx                     | 4 ++--
 src/plugins/showConnections/index.tsx                        | 5 +----
 src/plugins/spotifyControls/PlayerComponent.tsx              | 2 +-
 src/plugins/startupTimings/StartupTimingPage.tsx             | 2 +-
 src/plugins/textReplace/index.tsx                            | 2 +-
 12 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/Flex.tsx b/src/components/Flex.tsx
index 065ddac7..9dcaa803 100644
--- a/src/components/Flex.tsx
+++ b/src/components/Flex.tsx
@@ -23,9 +23,10 @@ export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
     gap?: CSSProperties["gap"];
     justifyContent?: CSSProperties["justifyContent"];
     alignItems?: CSSProperties["alignItems"];
+    flexWrap?: CSSProperties["flexWrap"];
 }
 
-export function Flex({ flexDirection, gap = "1em", justifyContent, alignItems, children, style, ...restProps }: FlexProps) {
+export function Flex({ flexDirection, gap = "1em", justifyContent, alignItems, flexWrap, children, style, ...restProps }: FlexProps) {
     style ??= {};
     Object.assign(style, {
         display: "flex",
@@ -33,6 +34,7 @@ export function Flex({ flexDirection, gap = "1em", justifyContent, alignItems, c
         gap,
         justifyContent,
         alignItems,
+        flexWrap
     });
 
     return (
diff --git a/src/components/settings/tabs/themes/ThemeCard.tsx b/src/components/settings/tabs/themes/ThemeCard.tsx
index 5d9b117b..c86bbb5e 100644
--- a/src/components/settings/tabs/themes/ThemeCard.tsx
+++ b/src/components/settings/tabs/themes/ThemeCard.tsx
@@ -35,7 +35,7 @@ export function ThemeCard({ theme, enabled, onChange, onDelete }: ThemeCardProps
                 )
             }
             footer={
-                <Flex flexDirection="row" style={{ gap: "0.2em" }}>
+                <Flex flexDirection="row" gap="0.2em">
                     {!!theme.website && <Link href={theme.website}>Website</Link>}
                     {!!(theme.website && theme.invite) && " • "}
                     {!!theme.invite && (
diff --git a/src/plugins/_api/badges/index.tsx b/src/plugins/_api/badges/index.tsx
index d3109b75..f8ba1aa1 100644
--- a/src/plugins/_api/badges/index.tsx
+++ b/src/plugins/_api/badges/index.tsx
@@ -213,7 +213,7 @@ export default definePlugin({
                                         margin: 0
                                     }}
                                 >
-                                    <Flex style={{ justifyContent: "center", alignItems: "center", gap: "0.5em" }}>
+                                    <Flex justifyContent="center" alignItems="center" gap="0.5em">
                                         <Heart />
                                         Vencord Donor
                                     </Flex>
@@ -244,7 +244,7 @@ export default definePlugin({
                                 </div>
                             </ModalContent>
                             <ModalFooter>
-                                <Flex style={{ width: "100%", justifyContent: "center" }}>
+                                <Flex justifyContent="center" style={{ width: "100%" }}>
                                     <DonateButton />
                                 </Flex>
                             </ModalFooter>
diff --git a/src/plugins/customRPC/index.tsx b/src/plugins/customRPC/index.tsx
index 90df95c2..db541b84 100644
--- a/src/plugins/customRPC/index.tsx
+++ b/src/plugins/customRPC/index.tsx
@@ -255,7 +255,7 @@ export default definePlugin({
                     </ErrorCard>
                 )}
 
-                <Flex flexDirection="column" style={{ gap: ".5em" }} className={Margins.top16}>
+                <Flex flexDirection="column" gap=".5em" className={Margins.top16}>
                     <Forms.FormText>
                         Go to the <Link href="https://discord.com/developers/applications">Discord Developer Portal</Link> to create an application and
                         get the application ID.
diff --git a/src/plugins/decor/ui/components/DecorSection.tsx b/src/plugins/decor/ui/components/DecorSection.tsx
index 5fe6cba5..3209b435 100644
--- a/src/plugins/decor/ui/components/DecorSection.tsx
+++ b/src/plugins/decor/ui/components/DecorSection.tsx
@@ -35,7 +35,7 @@ export default function DecorSection({ hideTitle = false, hideDivider = false, n
         hideDivider={hideDivider}
         className={noMargin && cl("section-remove-margin")}
     >
-        <Flex style={{ gap: "4px " }}>
+        <Flex gap="4px">
             <Button
                 onClick={() => {
                     if (!authorization.isAuthorized()) {
diff --git a/src/plugins/decor/ui/modals/GuidelinesModal.tsx b/src/plugins/decor/ui/modals/GuidelinesModal.tsx
index a4d6624d..604ed83e 100644
--- a/src/plugins/decor/ui/modals/GuidelinesModal.tsx
+++ b/src/plugins/decor/ui/modals/GuidelinesModal.tsx
@@ -42,7 +42,7 @@ function GuidelinesModal(props: ModalProps) {
             </Forms.FormText>
         </ModalContent>
         <ModalFooter className={cl("modal-footer")}>
-            <Flex style={{ gap: "4px" }}>
+            <Flex gap="4px">
                 <Button
                     onClick={() => {
                         settings.store.agreedToGuidelines = true;
diff --git a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
index 996b25f1..bfbc509a 100644
--- a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
@@ -164,7 +164,7 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
                                                         : permission.type === PermissionType.User
                                                             ? (user != null && getUniqueUsername(user)) ?? "Unknown User"
                                                             : (
-                                                                <Flex style={{ gap: "0.2em", justifyItems: "center" }}>
+                                                                <Flex gap="0.2em">
                                                                     @owner
                                                                     <OwnerCrownIcon height={18} width={18} aria-hidden="true" />
                                                                 </Flex>
diff --git a/src/plugins/reverseImageSearch/index.tsx b/src/plugins/reverseImageSearch/index.tsx
index 3c1a5402..10d3fad1 100644
--- a/src/plugins/reverseImageSearch/index.tsx
+++ b/src/plugins/reverseImageSearch/index.tsx
@@ -51,7 +51,7 @@ function makeSearchItem(src: string) {
                         key={key}
                         id={key}
                         label={
-                            <Flex style={{ alignItems: "center", gap: "0.5em" }}>
+                            <Flex alignItems="center" gap="0.5em">
                                 <img
                                     style={{
                                         borderRadius: "50%",
@@ -72,7 +72,7 @@ function makeSearchItem(src: string) {
                 key="search-image-all"
                 id="search-image-all"
                 label={
-                    <Flex style={{ alignItems: "center", gap: "0.5em" }}>
+                    <Flex alignItems="center" gap="0.5em">
                         <OpenExternalIcon height={16} width={16} />
                         All
                     </Flex>
diff --git a/src/plugins/showConnections/index.tsx b/src/plugins/showConnections/index.tsx
index 8ac76d32..796a8115 100644
--- a/src/plugins/showConnections/index.tsx
+++ b/src/plugins/showConnections/index.tsx
@@ -88,10 +88,7 @@ function ConnectionsComponent({ id, theme }: { id: string, theme: string; }) {
         return null;
 
     return (
-        <Flex style={{
-            gap: getSpacingPx(settings.store.iconSpacing),
-            flexWrap: "wrap"
-        }}>
+        <Flex gap={getSpacingPx(settings.store.iconSpacing)} flexWrap="wrap">
             {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} key={connection.id} />)}
         </Flex>
     );
diff --git a/src/plugins/spotifyControls/PlayerComponent.tsx b/src/plugins/spotifyControls/PlayerComponent.tsx
index 1a535a68..44968675 100644
--- a/src/plugins/spotifyControls/PlayerComponent.tsx
+++ b/src/plugins/spotifyControls/PlayerComponent.tsx
@@ -124,7 +124,7 @@ function Controls() {
 
     // the 1 is using position absolute so it does not make the button jump around
     return (
-        <Flex className={cl("button-row")} style={{ gap: 0 }}>
+        <Flex className={cl("button-row")} gap="0">
             <Button
                 className={classes(cl("button"), cl("shuffle"), cl(shuffle ? "shuffle-on" : "shuffle-off"))}
                 onClick={() => SpotifyStore.setShuffle(!shuffle)}
diff --git a/src/plugins/startupTimings/StartupTimingPage.tsx b/src/plugins/startupTimings/StartupTimingPage.tsx
index 4e5ed166..09f99a37 100644
--- a/src/plugins/startupTimings/StartupTimingPage.tsx
+++ b/src/plugins/startupTimings/StartupTimingPage.tsx
@@ -121,7 +121,7 @@ function ServerTrace({ trace }: ServerTraceProps) {
         <section>
             <Forms.FormTitle tag="h3">Server Trace</Forms.FormTitle>
             <code>
-                <Flex flexDirection="column" style={{ color: "var(--header-primary)", gap: 5, userSelect: "text" }}>
+                <Flex flexDirection="column" gap="5px" style={{ color: "var(--header-primary)", userSelect: "text" }}>
                     {lines.map((line, idx) => (
                         <span key={idx}>{line}</span>
                     ))}
diff --git a/src/plugins/textReplace/index.tsx b/src/plugins/textReplace/index.tsx
index d42a61bf..99bf3aac 100644
--- a/src/plugins/textReplace/index.tsx
+++ b/src/plugins/textReplace/index.tsx
@@ -143,7 +143,7 @@ function TextReplace({ title, rulesArray }: TextReplaceProps) {
                 {
                     rulesArray.map((rule, index) =>
                         <React.Fragment key={`${rule.find}-${index}`}>
-                            <Flex flexDirection="row" style={{ flexGrow: 1, gap: "0.5em" }}>
+                            <Flex gap="0.5em" flexDirection="row" style={{ flexGrow: 1 }}>
                                 <Input
                                     placeholder="Find"
                                     initialValue={rule.find}