Pin RHS to bottom

mattermost · Aug 9, 2024 · 80822f9 · 80822f9
1 parent fa19a71
commit 80822f9
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/webapp/src/components/rhs/common.tsx b/webapp/src/components/rhs/common.tsx
@@ -48,6 +48,7 @@ export const RHSPaddingContainer = styled.div`
 	margin-top: 16px;
     display: flex;
     flex-direction: column;
+	flex-grow: 1;
 	gap: 8px;
 `;
 
diff --git a/webapp/src/components/rhs/rhs_new_tab.tsx b/webapp/src/components/rhs/rhs_new_tab.tsx
@@ -58,6 +58,13 @@ const PlusMinus = styled.i`
     margin-right: 4px;
 `;
 
+const ReverseScroll = styled.div`
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	justify-content: flex-end;
+`;
+
 type Props = {
     botChannelId: string
     selectPost: (postId: string) => void
@@ -159,30 +166,32 @@ const RHSNewTab = ({botChannelId, selectPost, setCurrentTab}: Props) => {
 
     return (
         <RHSPaddingContainer>
-            <RHSImage/>
-            <RHSTitle><FormattedMessage defaultMessage='Ask Copilot anything'/></RHSTitle>
-            <RHSText><FormattedMessage defaultMessage='The Copilot is here to help. Choose from the prompts below or write your own.'/></RHSText>
-            <QuestionOptions>
-                <OptionButton onClick={addBrainstormingIdeas}>
-                    <LightbulbOutlineIcon/>
-                    <FormattedMessage defaultMessage='Brainstorm ideas'/>
-                </OptionButton>
-                <OptionButton onClick={addMeetingAgenda}>
-                    <FormatListNumberedIcon/>
-                    <FormattedMessage defaultMessage='Meeting agenda'/>
-                </OptionButton>
-                <OptionButton onClick={addProsAndCons}>
-                    <PlusMinus className='icon'>{'±'}</PlusMinus>
-                    <FormattedMessage defaultMessage='Pros and Cons'/>
-                </OptionButton>
-                <OptionButton onClick={addToDoList}>
-                    <PlaylistCheckIcon/>
-                    <FormattedMessage defaultMessage='To-do list'/>
-                </OptionButton>
-            </QuestionOptions>
-            <CreatePostContainer>
-                {editorComponent}
-            </CreatePostContainer>
+            <ReverseScroll>
+                <RHSImage/>
+                <RHSTitle><FormattedMessage defaultMessage='Ask Copilot anything'/></RHSTitle>
+                <RHSText><FormattedMessage defaultMessage='The Copilot is here to help. Choose from the prompts below or write your own.'/></RHSText>
+                <QuestionOptions>
+                    <OptionButton onClick={addBrainstormingIdeas}>
+                        <LightbulbOutlineIcon/>
+                        <FormattedMessage defaultMessage='Brainstorm ideas'/>
+                    </OptionButton>
+                    <OptionButton onClick={addMeetingAgenda}>
+                        <FormatListNumberedIcon/>
+                        <FormattedMessage defaultMessage='Meeting agenda'/>
+                    </OptionButton>
+                    <OptionButton onClick={addProsAndCons}>
+                        <PlusMinus className='icon'>{'±'}</PlusMinus>
+                        <FormattedMessage defaultMessage='Pros and Cons'/>
+                    </OptionButton>
+                    <OptionButton onClick={addToDoList}>
+                        <PlaylistCheckIcon/>
+                        <FormattedMessage defaultMessage='To-do list'/>
+                    </OptionButton>
+                </QuestionOptions>
+                <CreatePostContainer>
+                    {editorComponent}
+                </CreatePostContainer>
+            </ReverseScroll>
         </RHSPaddingContainer>
     );
 };