From 12fe9e9aa4fd4075aeeac8371790298099111e72 Mon Sep 17 00:00:00 2001
From: prostarz <tommyspam2000@gmail.com>
Date: Tue, 7 Jan 2025 18:21:14 +0000
Subject: [PATCH] feat(ui): make modals more responsive

---
 .../actions/edit.tsx                          |   3 +-
 .../modals/newGame/forms/metadata.tsx         |   2 +-
 .../modals/newGame/forms/settings.tsx         |   2 +-
 .../components/modals/newGame/index.tsx       |  68 ++---
 .../library/components/updateForm.tsx         | 241 +++++++++---------
 5 files changed, 161 insertions(+), 155 deletions(-)

diff --git a/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/actions/edit.tsx b/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/actions/edit.tsx
index f055861..2536a7f 100644
--- a/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/actions/edit.tsx
+++ b/src/features/library/components/cards/continuePlaying/ContinuePlayingCardOverlay/actions/edit.tsx
@@ -25,10 +25,11 @@ const UpdateDialog = ({ fetchGames, updateGame, game }: UpdateDialogProps) => {
           {t("update")}
         </DropdownMenuItem>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="h-[calc(100vh-10rem)] flex flex-col">
         <DialogHeader>
           <DialogTitle>{t("update_game")}</DialogTitle>
         </DialogHeader>
+
         <UpdateGameForm
           onSubmit={(values) => {
             updateGame(game.game_id, {
diff --git a/src/features/library/components/modals/newGame/forms/metadata.tsx b/src/features/library/components/modals/newGame/forms/metadata.tsx
index 3281f5b..ebf0190 100644
--- a/src/features/library/components/modals/newGame/forms/metadata.tsx
+++ b/src/features/library/components/modals/newGame/forms/metadata.tsx
@@ -17,7 +17,7 @@ const NewGameMetadataForm = ({ form }: NewGameMetadataFormProps) => {
     useFormActions(form);
 
   return (
-    <div className="w-full min-h-[20rem] h-full overflow-y-auto gap-2 flex flex-col">
+    <div className="flex flex-col w-full h-full gap-4">
       <FormField
         control={form.control}
         name="gameName"
diff --git a/src/features/library/components/modals/newGame/forms/settings.tsx b/src/features/library/components/modals/newGame/forms/settings.tsx
index f87073a..48e8afa 100644
--- a/src/features/library/components/modals/newGame/forms/settings.tsx
+++ b/src/features/library/components/modals/newGame/forms/settings.tsx
@@ -16,7 +16,7 @@ const NewGameSettingsForm = ({ form }: NewGameMetadataFormProps) => {
   const { handleWinePrefixButton } = useFormActions(form);
 
   return (
-    <div className="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-1">
+    <div className="flex flex-col w-full h-full gap-4">
       <FormField
         control={form.control}
         name="gameArgs"
diff --git a/src/features/library/components/modals/newGame/index.tsx b/src/features/library/components/modals/newGame/index.tsx
index ed46c5c..d2c5f15 100644
--- a/src/features/library/components/modals/newGame/index.tsx
+++ b/src/features/library/components/modals/newGame/index.tsx
@@ -6,6 +6,7 @@ import {
 } from "@/components/ui/dialog";
 import { Form } from "@/components/ui/form";
 import { Popover, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useLanguageContext } from "@/contexts/I18N";
 import { useGames } from "@/features/library/hooks/useGames";
@@ -69,12 +70,10 @@ const NewGameModal = () => {
   };
 
   return (
-    <DialogContent className="min-w-[20rem] min-h-[30rem] md:min-w-[30rem]">
-      <Tabs defaultValue="metadata" className="w-full">
-        <DialogHeader className="space-y-4">
-          <DialogTitle className="text-lg font-bold">
-            {t("new_game")}
-          </DialogTitle>
+    <Tabs defaultValue="metadata" className="w-full">
+      <DialogContent className="h-[calc(100vh-10rem)] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("new_game")}</DialogTitle>
 
           <TabsList className="flex justify-between w-full">
             <TabsTrigger value="metadata" className="flex-1">
@@ -87,34 +86,39 @@ const NewGameModal = () => {
         </DialogHeader>
 
         <Form {...form}>
-          <form
-            className="flex flex-col gap-4 mt-3"
-            autoComplete="off"
-            onSubmit={form.handleSubmit(handleAddGame)}
-          >
-            <TabsContent value="metadata">
-              <NewGameMetadataForm form={form} />
-            </TabsContent>
-            <TabsContent value="settings">
-              <NewGameSettingsForm form={form} />
-            </TabsContent>
+          <div className="flex-1 overflow-hidden">
+            <ScrollArea className="h-full">
+              <form
+                className="flex flex-col gap-4"
+                autoComplete="off"
+                onSubmit={form.handleSubmit(handleAddGame)}
+              >
+                <TabsContent value="metadata">
+                  <NewGameMetadataForm form={form} />
+                </TabsContent>
 
-            <div className="flex items-center justify-between gap-2 mt-4">
-              <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-                <PopoverTrigger asChild>
-                  <Button>{t("import_from_igdb")}</Button>
-                </PopoverTrigger>
-                <NewGameImport form={form} setPopoverOpen={setPopoverOpen} />
-              </Popover>
-
-              <Button type="submit" onClick={form.handleSubmit(handleAddGame)}>
-                {t("add_game")}
-              </Button>
-            </div>
-          </form>
+                <TabsContent value="settings">
+                  <NewGameSettingsForm form={form} />
+                </TabsContent>
+              </form>
+            </ScrollArea>
+          </div>
         </Form>
-      </Tabs>
-    </DialogContent>
+
+        <div className="flex items-center justify-between gap-2">
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <PopoverTrigger asChild>
+              <Button>{t("import_from_igdb")}</Button>
+            </PopoverTrigger>
+            <NewGameImport form={form} setPopoverOpen={setPopoverOpen} />
+          </Popover>
+
+          <Button type="submit" onClick={form.handleSubmit(handleAddGame)}>
+            {t("add_game")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Tabs>
   );
 };
 
diff --git a/src/features/library/components/updateForm.tsx b/src/features/library/components/updateForm.tsx
index 0358f9f..7c2c07c 100644
--- a/src/features/library/components/updateForm.tsx
+++ b/src/features/library/components/updateForm.tsx
@@ -1,7 +1,7 @@
 import { P } from "@/components/typography/p";
 import { Button } from "@/components/ui/button";
-import { DialogClose, DialogFooter } from "@/components/ui/dialog";
 import { Form, FormField } from "@/components/ui/form";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { useLanguageContext } from "@/contexts/I18N";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { FolderOpen } from "lucide-react";
@@ -83,136 +83,137 @@ const UpdateGameForm = ({ defaultValues, onSubmit }: UpdateGameFormProps) => {
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-4"
-        autoComplete="off"
-      >
-        <FormField
-          control={form.control}
-          name="gameName"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("name")}
-              description={t("the_name_of_the_game")}
-              field={field}
-              required
+      <div className="flex-1 overflow-hidden">
+        <ScrollArea className="h-full">
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4"
+            autoComplete="off"
+          >
+            <FormField
+              control={form.control}
+              name="gameName"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("name")}
+                  description={t("the_name_of_the_game")}
+                  field={field}
+                  required
+                />
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="gamePath"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("path")}
+                  description={t("the_path_to_the_game")}
+                  Button={
+                    <Button size="icon" onClick={handlePathButton}>
+                      <FolderOpen />
+                    </Button>
+                  }
+                  required
+                  field={field}
+                />
+              )}
             />
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="gamePath"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("path")}
-              description={t("the_path_to_the_game")}
-              Button={
-                <Button size="icon" onClick={handlePathButton}>
-                  <FolderOpen />
-                </Button>
-              }
-              required
-              field={field}
+
+            <FormField
+              control={form.control}
+              name="gameIcon"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("icon")}
+                  description={t("the_path_or_url_of_the_icon")}
+                  required
+                  Button={
+                    <Button size="icon" onClick={handleIconButton}>
+                      <FolderOpen />
+                    </Button>
+                  }
+                  field={field}
+                />
+              )}
             />
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="gameIcon"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("icon")}
-              description={t("the_path_or_url_of_the_icon")}
-              required
-              Button={
-                <Button size="icon" onClick={handleIconButton}>
-                  <FolderOpen />
-                </Button>
-              }
-              field={field}
+
+            <FormField
+              control={form.control}
+              name="gameArgs"
+              render={({ field }) => (
+                <>
+                  <GameFormInput
+                    text={t("arguments")}
+                    description={t("the_arguments_to_pass_to_the_game")}
+                    field={field}
+                  />
+                  {form.formState.errors.gameArgs && (
+                    <P className="w-full text-right text-red-500">
+                      {form.formState.errors.gameArgs.message}
+                    </P>
+                  )}
+                </>
+              )}
             />
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="gameArgs"
-          render={({ field }) => (
-            <>
-              <GameFormInput
-                text={t("arguments")}
-                description={t("the_arguments_to_pass_to_the_game")}
-                field={field}
-              />
-              {form.formState.errors.gameArgs && (
-                <P className="w-full text-right text-red-500">
-                  {form.formState.errors.gameArgs.message}
-                </P>
+
+            <FormField
+              control={form.control}
+              name="gameCommand"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("command")}
+                  description={t("the_command_to_run_the_game_e_g_wine")}
+                  field={field}
+                />
               )}
-            </>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="gameCommand"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("command")}
-              description={t("the_command_to_run_the_game_e_g_wine")}
-              field={field}
             />
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="igdbId"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("igdb_id")}
-              description={t("igdb_id")}
-              field={field}
+
+            <FormField
+              control={form.control}
+              name="igdbId"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("igdb_id")}
+                  description={t("igdb_id")}
+                  field={field}
+                />
+              )}
             />
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="steamId"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("steam_id")}
-              description={t("steam_id")}
-              field={field}
+
+            <FormField
+              control={form.control}
+              name="steamId"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("steam_id")}
+                  description={t("steam_id")}
+                  field={field}
+                />
+              )}
             />
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="winePrefixFolder"
-          render={({ field }) => (
-            <GameFormInput
-              text={t("wine_prefix_folder")}
-              description={t("the_path_to_your_wine_prefix_folder")}
-              field={field}
+
+            <FormField
+              control={form.control}
+              name="winePrefixFolder"
+              render={({ field }) => (
+                <GameFormInput
+                  text={t("wine_prefix_folder")}
+                  description={t("the_path_to_your_wine_prefix_folder")}
+                  field={field}
+                />
+              )}
             />
-          )}
-        />
-      </form>
-
-      <DialogFooter className="pt-2">
-        <DialogClose>
-          <Button variant="destructive">{t("cancel")}</Button>
-        </DialogClose>
+          </form>
+        </ScrollArea>
+      </div>
+
+      <div className="flex items-center justify-end gap-2">
         <Button onClick={form.handleSubmit(onSubmit)} disabled={loading}>
           {loading ? `${t("updating")}...` : t("update_game")}
         </Button>
-      </DialogFooter>
+      </div>
       {error && <P className="w-full text-right text-red-500">{error}</P>}
     </Form>
   );