From 544fae3808f8d414dfaf7b4d9868cd24a7ef4b82 Mon Sep 17 00:00:00 2001
From: Larvey <luisrvervaet@gmail.com>
Date: Thu, 16 Jun 2022 15:50:16 -0400
Subject: [PATCH] Added Scrollbar

---
 src/components/AppShelf/AddAppShelfItem.tsx | 148 +++++++++-----------
 1 file changed, 67 insertions(+), 81 deletions(-)

diff --git a/src/components/AppShelf/AddAppShelfItem.tsx b/src/components/AppShelf/AddAppShelfItem.tsx
index e1d70382d..50013e639 100644
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -14,6 +14,7 @@ import {
   Text,
   Tabs,
   MultiSelect,
+  ScrollArea,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useEffect, useState } from 'react';
@@ -202,14 +203,15 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
         })}
       >
         <Tabs position="apart">
-          <Tabs.Tab label="Options">
-            <Group direction="column" grow>
-              <TextInput
-                required
-                label="Service name"
-                placeholder="Plex"
-                {...form.getInputProps('name')}
-              />
+        <Tabs.Tab label="Options">
+          <ScrollArea style={{height:'42vh'}} scrollbarSize={4}>
+          <Group direction="column" grow>
+            <TextInput
+              required
+              label="Service name"
+              placeholder="Plex"
+              {...form.getInputProps('name')}
+            />
 
               <TextInput
                 required
@@ -276,79 +278,63 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
                       color: 'gray',
                     }}
                   >
-                    Tip: Get your API key{' '}
-                    <Anchor
-                      target="_blank"
-                      weight="bold"
-                      style={{ fontStyle: 'inherit', fontSize: 'inherit' }}
-                      href={`${hostname}/settings/general`}
-                    >
-                      here.
-                    </Anchor>
-                  </Text>
-                </>
-              )}
-              {form.values.type === 'qBittorrent' && (
-                <>
-                  <TextInput
-                    required
-                    label="Username"
-                    placeholder="admin"
-                    value={form.values.username}
-                    onChange={(event) => {
-                      form.setFieldValue('username', event.currentTarget.value);
-                    }}
-                    error={form.errors.username && 'Invalid username'}
-                  />
-                  <TextInput
-                    required
-                    label="Password"
-                    placeholder="adminadmin"
-                    value={form.values.password}
-                    onChange={(event) => {
-                      form.setFieldValue('password', event.currentTarget.value);
-                    }}
-                    error={form.errors.password && 'Invalid password'}
-                  />
-                </>
-              )}
-              {(form.values.type === 'Deluge' ||
-                form.values.type === 'Transmission' ||
-                form.values.type === 'qBittorrent') && (
-                <>
-                  <TextInput
-                    label="Username"
-                    placeholder="admin"
-                    value={form.values.username}
-                    onChange={(event) => {
-                      form.setFieldValue('username', event.currentTarget.value);
-                    }}
-                    error={form.errors.username && 'Invalid username'}
-                  />
-                  <TextInput
-                    label="Password"
-                    placeholder="password"
-                    value={form.values.password}
-                    onChange={(event) => {
-                      form.setFieldValue('password', event.currentTarget.value);
-                    }}
-                    error={form.errors.password && 'Invalid password'}
-                  />
-                </>
-              )}
-            </Group>
-          </Tabs.Tab>
-          <Tabs.Tab label="Advanced Options">
-            <MultiSelect
-              required
-              label="HTTP Status Codes"
-              data={statusCodes}
-              placeholder="Select valid status codes"
-              clearButtonLabel="Clear selection"
-              nothingFound="Nothing found"
-              clearable
-              searchable
-              {...form.getInputProps('status')}
+                    here.
+                  </Anchor>
+                </Text>
+              </>
+            )}
+            {form.values.type === 'qBittorrent' && (
+              <>
+                <TextInput
+                  required
+                  label="Username"
+                  placeholder="admin"
+                  value={form.values.username}
+                  onChange={(event) => {
+                    form.setFieldValue('username', event.currentTarget.value);
+                  }}
+                  error={form.errors.username && 'Invalid username'}
+                />
+                <TextInput
+                  required
+                  label="Password"
+                  placeholder="adminadmin"
+                  value={form.values.password}
+                  onChange={(event) => {
+                    form.setFieldValue('password', event.currentTarget.value);
+                  }}
+                  error={form.errors.password && 'Invalid password'}
+                />
+              </>
+            )}
+            {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+              <>
+                <TextInput
+                  label="Password"
+                  placeholder="password"
+                  value={form.values.password}
+                  onChange={(event) => {
+                    form.setFieldValue('password', event.currentTarget.value);
+                  }}
+                  error={form.errors.password && 'Invalid password'}
+                />
+              </>
+            )}
+          </Group>
+          </ScrollArea>
+        </Tabs.Tab>
+        <Tabs.Tab label="Advanced Options">
+          <Group direction="column" grow>
+          <MultiSelect
+            required 
+            label="HTTP Status Codes"
+            data={statusCodes}
+            placeholder="Select valid status codes"
+            clearButtonLabel="Clear selection"
+            nothingFound="Nothing found"
+            clearable
+            searchable
+            {...form.getInputProps('status')}
             />
             <Select
               required