fix auto scroll bug and mobile responsiveness (#965)

This PR fixes a bug in auto scroll after the first msg auto scroll was not working properly it is fixed now

 It also tightens Support & Help on small screens: slightly reduced card/title spacing and stacked-button gaps, and replaces fixed-height pills with responsive vertical padding so label text is not flush with the pill edges on mobile devices

## Before
<img width="382" height="232" alt="Screenshot 2026-05-18 at 6 56 48 PM" src="https://github.com/user-attachments/assets/62c583a2-2417-44b6-8502-d6a7950eb136" />

## After
<img width="396" height="267" alt="Screenshot 2026-05-18 at 6 57 04 PM" src="https://github.com/user-attachments/assets/919dbf50-664a-44ec-aa95-287ca13fd77a" />

apps/web/components/chat/index.tsx

@@ -219,6 +219,7 @@ export function ChatSidebar({
 	)
 	const messagesContainerRef = useRef<HTMLDivElement>(null)
 	const isScrolledToBottomRef = useRef(true)
+	const userJustSentRef = useRef(false)
 	const sentQueuedMessageRef = useRef<string | null>(null)
 	const pendingHighlightReplyRef = useRef<string | null>(null)
 	const awaitingHighlightInjectionRef = useRef(false)
@@ -364,6 +365,7 @@ export function ChatSidebar({
 		analytics.chatMessageSent({ source: "typed" })
 		sendMessage({ text: input })
 		setInput("")
+		userJustSentRef.current = true
 		scrollToBottom()
 	}
 
@@ -374,6 +376,7 @@ export function ChatSidebar({
 			analytics.chatSuggestedQuestionClicked()
 			analytics.chatMessageSent({ source: "suggested" })
 			sendMessage({ text: suggestion })
+			userJustSentRef.current = true
 			scrollToBottom()
 		},
 		[
@@ -691,13 +694,11 @@ export function ChatSidebar({
 	useEffect(() => {
 		const lastMessage = messages[messages.length - 1]
 		if (lastMessage?.role === "user" && messagesContainerRef.current) {
-			messagesContainerRef.current.scrollTop =
-				messagesContainerRef.current.scrollHeight
-			setIsScrolledToBottom(true)
+			scrollToBottom()
+		} else {
+			checkIfScrolledToBottom()
 		}
-		// Always check scroll position when messages change
-		checkIfScrolledToBottom()
-	}, [messages, checkIfScrolledToBottom])
+	}, [messages, checkIfScrolledToBottom, scrollToBottom])
 
 	useEffect(() => {
 		const isStreaming = status === "streaming"
@@ -707,7 +708,7 @@ export function ChatSidebar({
 		if (
 			isStreaming &&
 			isLastMessageFromAssistant &&
-			isScrolledToBottomRef.current
+			(isScrolledToBottomRef.current || userJustSentRef.current)
 		) {
 			scrollToBottom()
 		}
@@ -717,11 +718,14 @@ export function ChatSidebar({
 		const container = messagesContainerRef.current
 		if (!container) return
 
-		const isStreaming = status === "streaming"
-		if (!isStreaming) return
+		const isStreaming = status === "streaming" || status === "submitted"
+		if (!isStreaming) {
+			userJustSentRef.current = false
+			return
+		}
 
 		const mutationObserver = new MutationObserver(() => {
-			if (isScrolledToBottomRef.current) {
+			if (isScrolledToBottomRef.current || userJustSentRef.current) {
 				requestAnimationFrame(() => {
 					scrollToBottom()
 				})
@@ -747,16 +751,17 @@ export function ChatSidebar({
 		const handleScroll = () => {
 			requestAnimationFrame(() => {
 				checkIfScrolledToBottom()
+				if (!isScrolledToBottomRef.current) {
+					userJustSentRef.current = false
+				}
 			})
 		}
 
 		container.addEventListener("scroll", handleScroll, { passive: true })
-		// Initial check with a small delay to ensure DOM is ready
 		setTimeout(() => {
 			checkIfScrolledToBottom()
 		}, 100)
 
-		// Also observe resize to detect content height changes
 		const resizeObserver = new ResizeObserver(() => {
 			requestAnimationFrame(() => {
 				checkIfScrolledToBottom()

apps/web/components/settings/support.tsx

@@ -32,7 +32,7 @@ function SectionTitle({ children }: { children: React.ReactNode }) {
 		<p
 			className={cn(
 				dmSans125ClassName(),
-				"font-semibold text-[20px] tracking-[-0.2px] text-[#FAFAFA] px-2",
+				"font-semibold text-[20px] tracking-[-0.2px] text-[#FAFAFA] px-1 sm:px-2",
 			)}
 		>
 			{children}
@@ -44,7 +44,7 @@ function SupportCard({ children }: { children: React.ReactNode }) {
 	return (
 		<div
 			className={cn(
-				"relative bg-[#14161A] rounded-[14px] p-6 w-full overflow-hidden",
+				"relative bg-[#14161A] rounded-[14px] p-4 sm:p-6 w-full overflow-hidden",
 				"shadow-[inset_2.42px_2.42px_4.263px_rgba(11,15,21,0.7)]",
 			)}
 		>
@@ -69,7 +69,7 @@ function PillButton({
 			className={cn(
 				"relative flex items-center justify-center gap-2",
 				"bg-[#0D121A]",
-				"rounded-full h-11 px-4 flex-1",
+				"rounded-full py-3 sm:py-2.5 px-4 flex-1",
 				"cursor-pointer transition-opacity hover:opacity-80",
 				"shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.7)]",
 				dmSans125ClassName(),
@@ -128,7 +128,7 @@ export default function Support() {
 								reach us.
 							</p>
 						</div>
-						<div className="flex flex-col sm:flex-row gap-4">
+						<div className="flex flex-col sm:flex-row gap-2.5 sm:gap-4">
 							<PillButton onClick={handleMessageOnX}>
 								<span className="text-[14px] tracking-[-0.14px] text-[#FAFAFA] font-medium">
 									Message us on X