From 4523dc8b5d35112608fa35bafea4ac76e9ef71f6 Mon Sep 17 00:00:00 2001
From: gewfy <jakob@29k.org>
Date: Sun, 21 Jul 2024 23:32:38 +0200
Subject: [PATCH 1/2] Update HairCheck component to limit display name length
 to 20 characters

---
 .../ChangingRoom/components/HairCheck.tsx            | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx b/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx
index 646c0c248f..55e0f8244d 100644
--- a/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx
+++ b/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx
@@ -52,6 +52,8 @@ import SessionMood from './SessionMood';
 import AutoScrollView from '../../../../../lib/components/AutoScrollView/AutoScrollView';
 import useLogSessionMood from '../hooks/useLogSessionMood';
 
+const DISPLAY_NAME_MAX_LENGTH = 20;
+
 const KeyboardWrapper = styled.KeyboardAvoidingView.attrs({
   behavior: Platform.select<KeyboardAvoidingViewProps['behavior']>({
     ios: 'position',
@@ -86,11 +88,13 @@ const VideoText = styled(Body16)({
 });
 
 const InputWrapper = styled.View({
+  flexGrow: 0,
   flexDirection: 'row',
+  backgroundColor: 'red',
 });
 
 const StyledTextInput = styled(TextInput)({
-  flexGrow: 1,
+  flex: 1,
 });
 
 const Audio = styled(AudioIndicator)({
@@ -132,7 +136,9 @@ const HairCheck = () => {
   const isFocused = useIsFocused();
   const me = useLocalParticipant();
   const user = useUser();
-  const [localUserName, setLocalUserName] = useState(user?.displayName ?? '');
+  const [localUserName, setLocalUserName] = useState(
+    user?.displayName?.slice(0, DISPLAY_NAME_MAX_LENGTH) ?? '',
+  );
   const logSessionMetricEvent = useLiveSessionMetricEvents();
   const {
     checkAndPromptJoinPermissions,
@@ -257,7 +263,7 @@ const HairCheck = () => {
                 onSubmitEditing={joinPress}
                 autoCapitalize="words"
                 autoCorrect={false}
-                maxLength={20}
+                maxLength={DISPLAY_NAME_MAX_LENGTH}
                 defaultValue={localUserName}
                 placeholder={t('placeholder')}
               />

From 36f37872acd1899f6ac32b8004c3a982514b3788 Mon Sep 17 00:00:00 2001
From: gewfy <jakob@29k.org>
Date: Sun, 21 Jul 2024 23:33:03 +0200
Subject: [PATCH 2/2] Update HairCheck component to limit display name length
 to 20 characters

---
 .../screens/LiveSession/ChangingRoom/components/HairCheck.tsx   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx b/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx
index 55e0f8244d..2917db72a7 100644
--- a/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx
+++ b/client/src/routes/screens/LiveSession/ChangingRoom/components/HairCheck.tsx
@@ -88,9 +88,7 @@ const VideoText = styled(Body16)({
 });
 
 const InputWrapper = styled.View({
-  flexGrow: 0,
   flexDirection: 'row',
-  backgroundColor: 'red',
 });
 
 const StyledTextInput = styled(TextInput)({