From e4b013cc2083e4e69e58936f4085c11fc2f22d24 Mon Sep 17 00:00:00 2001
From: Raicuparta <Raicuparta@users.noreply.github.com>
Date: Wed, 26 Jul 2023 21:32:28 +0200
Subject: [PATCH 1/2] [GUI] Tag layout shifting on selecting

---
 .../src/components/main/mods/ModsTagChips.tsx | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx b/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx
index 3e779d779..60341f723 100644
--- a/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx
+++ b/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx
@@ -2,7 +2,7 @@ import { hooks } from "@commands";
 import { withStyledErrorBoundary } from "@components/common/StyledErrorBoundary";
 import { useGetTranslation } from "@hooks";
 import { DeleteRounded } from "@mui/icons-material";
-import { Chip, Stack } from "@mui/material";
+import { Chip, IconButton, Stack } from "@mui/material";
 import { memo, useCallback, useEffect, useRef } from "react";
 
 export interface ModsTagsChipsProps {
@@ -44,18 +44,31 @@ const ModsTagsChips = memo(function ModsTagsChips(props: ModsTagsChipsProps) {
     }, []);
 
     return (
-        <Stack
-            className="scroll-shadows"
-            sx={{
-                minHeight: "25px",
-                overflowX: "auto",
-                scrollbarWidth: "none",
-                "::-webkit-scrollbar": { display: "none" }
-            }}
-            direction="row"
-            ref={scrollRef}
-            gap={1}
-        >
+        <Stack direction="row" gap={1}>
+            <Stack
+                className="scroll-shadows"
+                sx={{
+                    minHeight: "25px",
+                    overflowX: "auto",
+                    scrollbarWidth: "none",
+                    "::-webkit-scrollbar": { display: "none" }
+                }}
+                direction="row"
+                ref={scrollRef}
+                gap={1}
+            >
+                {availableTags.map((t) => (
+                    <Chip
+                        label={t}
+                        key={t}
+                        onClick={() => onChipClicked(t)}
+                        size="small"
+                        color={tagIsSelected(props.selectedTags, t) ? "primary" : "default"}
+                        variant={tagIsSelected(props.selectedTags, t) ? "filled" : "filled"}
+                    />
+                ))}
+            </Stack>
+
             {selectedTags.length !== 0 && (
                 <Chip
                     icon={<DeleteRounded />}
@@ -66,15 +79,6 @@ const ModsTagsChips = memo(function ModsTagsChips(props: ModsTagsChipsProps) {
                     onClick={() => props.onTagsChanged([])}
                 />
             )}
-            {availableTags.map((t) => (
-                <Chip
-                    label={t}
-                    key={t}
-                    onClick={() => onChipClicked(t)}
-                    size="small"
-                    variant={tagIsSelected(props.selectedTags, t) ? "filled" : "outlined"}
-                />
-            ))}
         </Stack>
     );
 });

From debdd6a4efda73283f0956892a122d4e32975eae Mon Sep 17 00:00:00 2001
From: Raicuparta <Raicuparta@users.noreply.github.com>
Date: Wed, 26 Jul 2023 21:37:38 +0200
Subject: [PATCH 2/2] Remove unused import

---
 owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx b/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx
index 60341f723..88b221c9d 100644
--- a/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx
+++ b/owmods_gui/frontend/src/components/main/mods/ModsTagChips.tsx
@@ -2,7 +2,7 @@ import { hooks } from "@commands";
 import { withStyledErrorBoundary } from "@components/common/StyledErrorBoundary";
 import { useGetTranslation } from "@hooks";
 import { DeleteRounded } from "@mui/icons-material";
-import { Chip, IconButton, Stack } from "@mui/material";
+import { Chip, Stack } from "@mui/material";
 import { memo, useCallback, useEffect, useRef } from "react";
 
 export interface ModsTagsChipsProps {