Adjust styles

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

@@ -13,7 +13,6 @@ import { toastError } from '~/client/util/toastr';
 import { MessageErrorCode, StreamErrorCode } from '~/features/openai/interfaces/message-error';
 import type { IThreadRelationHasId } from '~/features/openai/interfaces/thread-relation';
 import { useGrowiCloudUri } from '~/stores-universal/context';
-import { useIsMobile } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 import type { AiAssistantHasId } from '../../../../interfaces/ai-assistant';
@@ -30,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,
@@ -412,7 +409,6 @@ export const AiAssistantChatSidebar: FC = memo((): JSX.Element => {
   const sidebarScrollerRef = useRef<HTMLDivElement>(null);
 
   const { data: aiAssistantChatSidebarData, close: closeAiAssistantChatSidebar } = useAiAssistantChatSidebar();
-  const { data: isMobile } = useIsMobile();
 
   const aiAssistantData = aiAssistantChatSidebarData?.aiAssistantData;
   const threadData = aiAssistantChatSidebarData?.threadData;
@@ -438,12 +434,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: isMobile ? '100%' : `${RIGHT_SIDEBAR_WIDTH}px`,
-        overflow: 'hidden',
-      }}
+      className={`position-fixed top-0 end-0 h-100 border-start bg-body shadow-sm overflow-hidden ${moduleClass}`}
       data-testid="grw-right-sidebar"
     >
       <SimpleBar