Merge pull request #9720 from weseek/fix/162826-ai-assistant-sidebar-layout-in-smartphone-mode

fix: AiAssistantSidebar layout in smartphone mode

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.module.scss

@@ -3,6 +3,12 @@
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-ai-assistant-chat-sidebar :global {
+  z-index: bs.$zindex-fixed + 2;
+  width: 100%;
+
+  @include bs.media-breakpoint-up(sm) {
+    width: 500px;
+  }
 
   .textarea-ask {
     max-height: 30vh;

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantChatSidebar/AiAssistantChatSidebar.tsx

@@ -29,8 +29,6 @@ const logger = loggerFactory('growi:openai:client:components:AiAssistantChatSide
 
 const moduleClass = styles['grw-ai-assistant-chat-sidebar'] ?? '';
 
-const RIGHT_SIDEBAR_WIDTH = 500;
-
 type Message = {
   id: string,
   content: string,
@@ -438,8 +436,7 @@ export const AiAssistantChatSidebar: FC = memo((): JSX.Element => {
   return (
     <div
       ref={sidebarRef}
-      className={`position-fixed top-0 end-0 h-100 border-start bg-body shadow-sm ${moduleClass}`}
-      style={{ zIndex: 1500, width: `${RIGHT_SIDEBAR_WIDTH}px` }}
+      className={`position-fixed top-0 end-0 h-100 border-start bg-body shadow-sm overflow-hidden ${moduleClass}`}
       data-testid="grw-right-sidebar"
     >
       <SimpleBar