fix(chat): spacing and InputBar resize

Author: stephl3

chat/input-bar/src/InputBar/InputBar.styles.ts

@@ -15,6 +15,14 @@ import {
   Variant,
 } from '@leafygreen-ui/tokens';
 
+/**
+ * when `InputBar` is used in a drawer (or other context that restricts
+ * the width of the container), we need to set a minimum width so that
+ * `react-textarea-autosize` can properly calculate the initial height
+ * of the textarea element.
+ */
+const TEXT_AREA_MIN_WIDTH = 150;
+
 const baseFormStyles = css`
   width: 100%;
 `;
@@ -100,6 +108,7 @@ export const getContentWrapperStyles = ({
   });
 
 const getBaseTextAreaStyles = ({ theme }: { theme: Theme }) => css`
+  min-width: ${TEXT_AREA_MIN_WIDTH}px;
   width: 100%;
   font-size: ${BaseFontSize.Body1}px;
   font-family: ${fontFamilies.default};

chat/message-feed/src/MessageFeed/MessageFeed.styles.ts

@@ -39,8 +39,13 @@ export const scrollContainerStyles = css`
   overflow-y: scroll;
   scroll-behavior: smooth;
   position: relative;
-  padding: 0 ${spacing[400]}px ${spacing[400]}px;
+  padding: 0 ${spacing[400]}px;
   display: flex;
   flex-direction: column;
   gap: ${spacing[400]}px;
 `;
+
+// Ensures the intercept element is visible and considered by the browser
+export const interceptStyles = css`
+  min-height: 1px;
+`;

chat/message-feed/src/MessageFeed/MessageFeed.tsx

@@ -14,7 +14,11 @@ import LeafyGreenProvider, {
 
 import { ScrollToLatestButton } from '../ScrollToLatestButton';
 
-import { getWrapperStyles, scrollContainerStyles } from './MessageFeed.styles';
+import {
+  getWrapperStyles,
+  interceptStyles,
+  scrollContainerStyles,
+} from './MessageFeed.styles';
 import { MessageFeedProps } from '.';
 
 export const MessageFeed = forwardRef(
@@ -106,10 +110,10 @@ export const MessageFeed = forwardRef(
         >
           <div className={scrollContainerStyles} ref={scrollContainerRef}>
             {/* Empty span element used to track if container can scroll up */}
-            <span ref={topInterceptRef} />
+            <span className={interceptStyles} ref={topInterceptRef} />
             {children}
             {/* Empty span element used to track if container can scroll down */}
-            <span ref={bottomInterceptRef} />
+            <span className={interceptStyles} ref={bottomInterceptRef} />
           </div>
           <ScrollToLatestButton
             darkMode={darkMode}