diff --git a/components/ai_chat/resources/page/stories/components_panel.tsx b/components/ai_chat/resources/page/stories/components_panel.tsx
index f1a87774803b..9859dbc6dfa8 100644
--- a/components/ai_chat/resources/page/stories/components_panel.tsx
+++ b/components/ai_chat/resources/page/stories/components_panel.tsx
@@ -12,7 +12,7 @@ import { getKeysForMojomEnum } from '$web-common/mojomUtils'
 import { InferControlsFromArgs } from '../../../../../.storybook/utils'
 import * as Mojom from '../../common/mojom'
 import { ActiveChatContext, SelectedChatDetails } from '../state/active_chat_context'
-import { AIChatContext, AIChatReactContext } from '../state/ai_chat_context'
+import { AIChatContext, AIChatReactContext, useIsSmall } from '../state/ai_chat_context'
 import { ConversationContext, ConversationReactContext } from '../state/conversation_context'
 import FeedbackForm from '../components/feedback_form'
 import FullPage from '../components/full_page'
@@ -474,6 +474,7 @@ const preview: Meta<CustomArgs> = {
   decorators: [
     (Story, options) => {
       const [, setArgs] = useArgs()
+      const isSmall = useIsSmall()
 
       const siteInfo = options.args.hasSiteInfo ? SITE_INFO : new Mojom.SiteInfo()
       const suggestedQuestions = options.args.hasSuggestedQuestions
@@ -495,7 +496,8 @@ const preview: Meta<CustomArgs> = {
         setArgs({ inputText })
       }
 
-      const [showSidebar, setShowSidebar] = useState(false)
+      const [showSidebar, setShowSidebar] = useState(isSmall)
+
       const aiChatContext: AIChatContext = {
         conversationEntriesComponent: StorybookConversationEntries,
         initialized: options.args.initialized,