Merge pull request #7478 from weseek/imprv/container-styles

imprv: container styles

packages/app/src/components/Layout/MainPane.tsx

@@ -2,7 +2,6 @@ import { ReactNode } from 'react';
 
 
 type Props = {
-  className?: string,
   children?: ReactNode,
   sideContents?: ReactNode,
   footerContents?: ReactNode,
@@ -10,14 +9,14 @@ type Props = {
 
 export const MainPane = (props: Props): JSX.Element => {
   const {
-    className, children, sideContents, footerContents,
+    children, sideContents, footerContents,
   } = props;
 
   return (
     <>
       <div className="flex-grow-1">
-        <div id="main" className={`main ${className}`}>
-          <div id="content-main" className="content-main grw-container-convertible">
+        <div id="main" className="main">
+          <div id="content-main" className="content-main container-lg grw-container-convertible">
             { sideContents != null
               ? (
                 <div className="d-flex flex-column flex-column-reverse flex-lg-row">

packages/app/src/components/PageContentFooter.tsx

@@ -23,7 +23,7 @@ export const PageContentFooter = (props: PageContentFooterProps): JSX.Element =>
 
   return (
     <div className={`${styles['page-content-footer']} page-content-footer py-4 d-edit-none d-print-none}`}>
-      <div className="grw-container-convertible">
+      <div className="container-lg grw-container-convertible">
         <div className="page-meta">
           <AuthorInfo user={creator as IUser} date={createdAt} mode="create" locate="footer" />
           <AuthorInfo user={lastUpdateUser as IUser} date={updatedAt} mode="update" locate="footer" />

packages/app/src/components/SearchPage/SearchPageBase.tsx

@@ -127,7 +127,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
 
   if (!isSearchServiceConfigured) {
     return (
-      <div className="grw-container-convertible">
+      <div className="container-lg grw-container-convertible">
         <div className="row mt-5">
           <div className="col text-muted">
             <h1>Search service is not configured in this system.</h1>
@@ -139,7 +139,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
 
   if (!isSearchServiceReachable) {
     return (
-      <div className="grw-container-convertible">
+      <div className="container-lg grw-container-convertible">
         <div className="row mt-5">
           <div className="col text-muted">
             <h1>Search service occures errors. Please contact to administrators of this system.</h1>

packages/app/src/components/Sidebar/Tag.tsx

@@ -44,7 +44,7 @@ const Tag: FC = () => {
 
   // todo: adjust design by XD
   return (
-    <div className="grw-container-convertible px-4 mb-5 pb-5" data-testid="grw-sidebar-content-tags">
+    <div className="grw-container-convertible container-lg px-4 mb-5 pb-5" data-testid="grw-sidebar-content-tags">
       <div className="grw-sidebar-content-header py-3 d-flex">
         <h3 className="mb-0">{t('Tags')}</h3>
         <SidebarHeaderReloadButton onClick={() => onReload()}/>

packages/app/src/pages/me/[[...path]].page.tsx

@@ -116,7 +116,7 @@ const MePage: NextPageWithLayout<Props> = (props: Props) => {
         <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
 
         <div id="main" className='main'>
-          <div id="content-main" className="content-main grw-container-convertible">
+          <div id="content-main" className="content-main container-lg grw-container-convertible">
             {targetPage.component}
           </div>
         </div>

packages/app/src/pages/tags.page.tsx

@@ -74,7 +74,7 @@ const TagPage: NextPageWithLayout<CommonProps> = (props: Props) => {
         <title>{title}</title>
       </Head>
       <div className="dynamic-layout-root">
-        <div className="grw-container-convertible mb-5 pb-5" data-testid="tags-page">
+        <div className="grw-container-convertible container-lg mb-5 pb-5" data-testid="tags-page">
           <h2 className="my-3">{`${t('Tags')}(${totalCount})`}</h2>
           <div className="px-3 mb-5 text-center">
             <TagCloudBox tags={tagData} minSize={20} />

packages/app/src/pages/trash.page.tsx

@@ -78,7 +78,7 @@ const TrashPage: NextPageWithLayout<CommonProps> = (props: Props) => {
           />
         </header>
 
-        <div className="content-main grw-container-convertible mb-5 pb-5">
+        <div className="content-main container-lg grw-container-convertible mb-5 pb-5">
           <TrashPageList />
         </div>
 

packages/app/src/styles/_layout.scss

@@ -1,12 +1,9 @@
 @use './variables' as var;
 @use './bootstrap/init' as bs;
 
-.dynamic-layout-root:not(.growi-layout-fluid) .grw-container-convertible {
-  @extend .container-lg;
-}
-
 .dynamic-layout-root.growi-layout-fluid .grw-container-convertible {
-  @extend .container-fluid;
+  width: 100%;
+  max-width: none;
 }
 
 .grw-bg-image-wrapper {
@@ -20,10 +17,6 @@
   }
 }
 
-body.not-found-page .grw-container-convertible {
-  @extend .container-lg;
-}
-
 .grw-modal-head {
   border-bottom: 1px solid transparent;
 }