Merge pull request #8195 from weseek/imprv/print-styles

imprv: Printing styles

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -251,6 +251,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
 
   return (
     <DropdownMenu
+      className="d-print-none"
       data-testid="page-item-control-menu"
       right={alignRight}
       modifiers={getCustomModifiers(alignRight)}

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -371,7 +371,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
     return (
       <>
         <div className="d-flex">
-          <div className="d-flex flex-column align-items-end justify-content-center py-md-2" style={{ gap: `${isCompactMode ? '5px' : '7px'}` }}>
+          <div className="d-flex flex-column align-items-end justify-content-center py-md-2 d-print-none" style={{ gap: `${isCompactMode ? '5px' : '7px'}` }}>
             {isViewMode && (
               <div className="h-50">
                 {pageId != null && (

apps/app/src/components/Page/CopyDropdown.jsx

@@ -110,7 +110,7 @@ const CopyDropdown = (props) => {
 
   return (
     <>
-      <Dropdown className={`${styles['grw-copy-dropdown']} grw-copy-dropdown`} isOpen={dropdownOpen} toggle={toggleDropdown}>
+      <Dropdown className={`${styles['grw-copy-dropdown']} grw-copy-dropdown d-print-none`} isOpen={dropdownOpen} toggle={toggleDropdown}>
         <DropdownToggle
           caret
           className={dropdownToggleClassName}

apps/app/src/components/Page/RenderTagLabels.tsx

@@ -44,7 +44,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
       })}
       <NotAvailableForGuest>
         <NotAvailableForReadOnlyUser>
-          <div id="edit-tags-btn-wrapper-for-tooltip">
+          <div id="edit-tags-btn-wrapper-for-tooltip" className="d-print-none">
             <a
               className={`btn btn-link btn-edit-tags text-muted p-0 d-flex align-items-center ${isTagsEmpty && 'no-tags'} ${isTagLabelsDisabled && 'disabled'}`}
               onClick={openEditorHandler}

apps/app/src/components/Page/TagLabels.tsx

@@ -34,9 +34,11 @@ export const TagLabels:FC<Props> = (props: Props) => {
     return <TagLabelsSkeleton />;
   }
 
+  const printNoneClass = tags.length === 0 ? 'd-print-none' : '';
+
   return (
     <>
-      <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center`} data-testid="grw-tag-labels">
+      <div className={`${styles['grw-tag-labels']} grw-tag-labels d-flex align-items-center ${printNoneClass}`} data-testid="grw-tag-labels">
         <i className="tag-icon icon-tag mr-2" />
         <RenderTagLabels
           tags={tags}

apps/app/src/components/PageSideContents.tsx

@@ -41,7 +41,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
   return (
     <>
       {/* Page list */}
-      <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
+      <div className={`grw-page-accessories-control ${styles['grw-page-accessories-control']} d-print-none`}>
         {!isSharedUser && (
           <button
             type="button"
@@ -64,7 +64,7 @@ export const PageSideContents = (props: PageSideContentsProps): JSX.Element => {
 
       {/* Comments */}
       {!isTopPagePath && (
-        <div className={`mt-2 grw-page-accessories-control ${styles['grw-page-accessories-control']}`}>
+        <div className={`mt-2 grw-page-accessories-control ${styles['grw-page-accessories-control']} d-print-none`}>
           <Link to="page-comments" offset={-120}>
             <button
               type="button"