Adjust responsive

apps/app/src/client/components/AuthorInfo/AuthorInfo.tsx

@@ -76,12 +76,12 @@ export const AuthorInfo = (props: AuthorInfoProps): JSX.Element => {
   };
 
   return (
-    <div className={`grw-author-info ${styles['grw-author-info']} d-flex align-items-center mb-2 ms-3`}>
-      <div className="me-2">
+    <div className={`grw-author-info ${styles['grw-author-info']} d-flex align-items-center mb-2`}>
+      <div className="me-2 d-none d-lg-block">
         <UserPicture user={user} size="sm" />
       </div>
       <div>
-        <div className="text-secondary mb-1">{infoLabelForPageSide} {userLabel}</div>
+        <div className="text-secondary mb-1">{infoLabelForPageSide} <br className="d-lg-none" />{userLabel}</div>
         <div className="text-secondary text-date" data-vrt-blackout-datetime>
           {renderParsedDate()}
         </div>

apps/app/src/client/components/PageSideContents/PageSideContents.tsx

@@ -98,7 +98,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
   return (
     <>
       {/* AuthorInfo */}
-      <div className="page-meta border-bottom pb-2 mb-3">
+      <div className=" d-none d-md-block page-meta border-bottom pb-2 ms-lg-3 mb-3">
         <AuthorInfo user={creator} date={createdAt} mode="create" locate="pageSide" />
         <AuthorInfo user={lastUpdateUser} date={updatedAt} mode="update" locate="pageSide" />
       </div>

apps/app/src/components/PageView/PageViewLayout.module.scss

@@ -29,6 +29,10 @@ $page-view-layout-margin-top: 32px;
       margin-left: 30px;
     }
 
+    @include bs.media-breakpoint-up(md) {
+      max-width: 170px;
+    }
+
     @include bs.media-breakpoint-down(sm) {
       position: fixed;
       right: 1rem;