From 81fbaeae44e3eb2f8d43b922f12bbdad1d1ada7a Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Thu, 10 Aug 2023 22:15:45 -0700
Subject: [PATCH] Style project settings on mobile (#134)

* Style project settings on mobile

* Use auto-resize text area for display name

* Remove unused import
---
 app/src/components/CopiableCode.tsx      | 2 +-
 app/src/pages/project/settings/index.tsx | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/src/components/CopiableCode.tsx b/app/src/components/CopiableCode.tsx
index 1c4d136..407c08c 100644
--- a/app/src/components/CopiableCode.tsx
+++ b/app/src/components/CopiableCode.tsx
@@ -19,7 +19,7 @@ const CopiableCode = ({ code }: { code: string }) => {
       w="full"
       justifyContent="space-between"
     >
-      <Text fontFamily="inconsolata" fontWeight="bold" letterSpacing={0.5}>
+      <Text fontFamily="inconsolata" fontWeight="bold" letterSpacing={0.5} overflowX="auto">
         {code}
       </Text>
       <Tooltip closeOnClick={false} label={copied ? "Copied!" : "Copy to clipboard"}>
diff --git a/app/src/pages/project/settings/index.tsx b/app/src/pages/project/settings/index.tsx
index 1c69296..0896f32 100644
--- a/app/src/pages/project/settings/index.tsx
+++ b/app/src/pages/project/settings/index.tsx
@@ -5,7 +5,6 @@ import {
   type TextProps,
   VStack,
   HStack,
-  Input,
   Button,
   Divider,
   Icon,
@@ -21,6 +20,7 @@ import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
 import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 import CopiableCode from "~/components/CopiableCode";
 import { DeleteProjectDialog } from "~/components/projectSettings/DeleteProjectDialog";
+import AutoResizeTextArea from "~/components/AutoResizeTextArea";
 
 export default function Settings() {
   const utils = api.useContext();
@@ -84,7 +84,7 @@ export default function Settings() {
               <Text fontWeight="bold" fontSize="xl">
                 Display Name
               </Text>
-              <Input
+              <AutoResizeTextArea
                 w="full"
                 maxW={600}
                 value={name}
@@ -136,10 +136,13 @@ export default function Settings() {
                   variant="outline"
                   borderRadius={4}
                   mt={2}
+                  height="auto"
                   onClick={deleteProjectOpen.onOpen}
                 >
                   <Icon as={BsTrash} />
-                  <Text>Delete {selectedProject?.name}</Text>
+                  <Text overflowWrap="break-word" whiteSpace="normal" py={2}>
+                    Delete {selectedProject?.name}
+                  </Text>
                 </HStack>
               </VStack>
             )}