diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 28cde204e5ef..5490c8653d6a 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -481,11 +481,7 @@ function BaseChatContent({
 
             {/* Loading indicator at bottom of messages container */}
             {isLoading && (
-              <div className="px-0 -mx-6">
-                <LoadingGoose
-                  message={isLoadingSummary ? 'summarizing conversation…' : undefined}
-                />
-              </div>
+              <LoadingGoose message={isLoadingSummary ? 'summarizing conversation…' : undefined} />
             )}
 
             {/* Custom content after messages */}
diff --git a/ui/desktop/src/components/pair.tsx b/ui/desktop/src/components/pair.tsx
index 9489f12b87f4..e44d2d8cd0aa 100644
--- a/ui/desktop/src/components/pair.tsx
+++ b/ui/desktop/src/components/pair.tsx
@@ -32,8 +32,10 @@ import BaseChat from './BaseChat';
 import ParameterInputModal from './ParameterInputModal';
 import { useRecipeManager } from '../hooks/useRecipeManager';
 import { useIsMobile } from '../hooks/use-mobile';
+import { useSidebar } from './ui/sidebar';
 import { Recipe } from '../recipe';
 import 'react-toastify/dist/ReactToastify.css';
+import { cn } from '../utils';
 
 export interface ChatType {
   id: string;
@@ -56,6 +58,7 @@ export default function Pair({
 }) {
   const location = useLocation();
   const isMobile = useIsMobile();
+  const { state: sidebarState } = useSidebar();
   const [hasProcessedInitialInput, setHasProcessedInitialInput] = useState(false);
   const [shouldAutoSubmit, setShouldAutoSubmit] = useState(false);
   const [initialMessage, setInitialMessage] = useState<string | null>(null);
@@ -184,10 +187,6 @@ export default function Pair({
     return <div>{/* Any Pair-specific content before messages can go here */}</div>;
   };
 
-  // Add mobile-specific padding so the content doesnt scroll under the window controls
-  const mobilePaddingClass = isMobile ? 'pt-[42px]' : '';
-  const contentClassName = `pl-6 px-4 pb-16 pt-2 ${mobilePaddingClass}`.trim();
-
   return (
     <>
       <BaseChat
@@ -200,7 +199,7 @@ export default function Pair({
         onMessageStreamFinish={handleMessageStreamFinish}
         renderBeforeMessages={renderBeforeMessages}
         customChatInputProps={customChatInputProps}
-        contentClassName={contentClassName} // Use dynamic content class with mobile margin
+        contentClassName={cn('pr-1', (isMobile || sidebarState === 'collapsed') && 'pt-11')} // Use dynamic content class with mobile margin and sidebar state
         showPopularTopics={!isTransitioningFromHub} // Don't show popular topics while transitioning from Hub
         suppressEmptyState={isTransitioningFromHub} // Suppress all empty state content while transitioning from Hub
       />