46275 feat(print): Add print styles and integrate print.css for improved printing functionality across components

Author: pneumatic-ilyacedrik

frontend/src/public/assets/css/print/print.css

@@ -0,0 +1,34 @@
+/* stylelint-disable declaration-no-important */
+@media print {
+    html,
+    body {
+      overflow: visible !important;
+      height: auto !important;
+    }
+  
+    [id='pneumatic-frontend'] {
+      overflow: visible !important;
+      height: auto !important;
+    }
+  
+    main .container-fluid .row {
+      display: flex !important;
+    }
+  
+    * {
+      print-color-adjust: exact;
+    }
+
+    * {
+        scrollbar-width: none;
+    }
+    
+    *::-webkit-scrollbar {
+    display: none;
+    }
+
+    .no-print {
+        display: none !important;
+    }
+}
+  

frontend/src/public/assets/css/style.css

@@ -2,6 +2,7 @@
 // Table of Contents
 // -------------------
 // 00. Variables
+// 00.1. Print
 // 01. Library
 // 02. Reset style
 // 03. Base style
@@ -14,6 +15,12 @@
 
 @import './variables/color';
 
+/* ===================
+// 00.1. Print
+// =================== */
+
+@import './print/print.css';
+
 /* ===================
 // 01. Library
 // ===================
@@ -93,4 +100,4 @@ svg {
 /* Fix bootstrap style */
 .form-control {
   font-size: 1.5rem !important;
-}
+}

frontend/src/public/components/TaskCard/TaskCard.tsx

@@ -365,7 +365,7 @@ export function TaskCard({
           <UsersDropdown
               isMulti
               controlSize="sm"
-              className={styles['responsible']}
+              className={classnames(styles['responsible'], 'no-print')} 
               placeholder={formatMessage({ id: 'user.search-field-placeholder' })}
               options={[...performerGroupDropdownOption, ...performerDropdownOption]}
               value={[...performerDropdownValue, ...performerGroupDropdownValue]}
@@ -379,7 +379,7 @@ export function TaskCard({
         )}
 
         {viewMode !== ETaskCardViewMode.Guest && !task.isReadOnlyViewer && (
-          <GuestController ref={guestsControllerRef} taskId={task.id} className={styles['guest-dropdown']} />
+          <GuestController ref={guestsControllerRef} taskId={task.id} className={classnames(styles['guest-dropdown'], 'no-print')} />
         )}
       </>
     );
@@ -497,7 +497,7 @@ export function TaskCard({
     );
 
     return (
-      <div className={styles['buttons']}>
+      <div className={classnames(styles['buttons'], 'no-print')}>
         <div className={styles['buttons__complete']}>
           {isEmbeddedWorkflowsComplete ? (
             renderCompleteButton(!isEmbeddedWorkflowsComplete)

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLog.tsx

@@ -222,7 +222,7 @@ export const WorkflowLog = ({
     }
 
     return (
-      <div className={styles['comment-field']}>
+      <div className={classnames(styles['comment-field'], 'no-print')}>
         <PopupCommentFieldContainer sendComment={sendComment} taskId={taskId} mentions={mentions} />
       </div>
     );

frontend/src/public/components/Workflows/WorkflowLog/WorkflowLogEvents/WorkflowLogTaskComment/WorkflowLogTaskComment.tsx

@@ -158,7 +158,7 @@ export function WorkflowLogTaskComment({
     if (currentUserId !== userId || workflowStatus === EWorkflowStatus.Finished) return null;
 
     return (
-      <div className={styles['comment__actions']}>
+      <div className={classnames(styles['comment__actions'], 'no-print')}>
         {renderDeleteButton()}
         {!isDelete && (
           <button
@@ -327,7 +327,7 @@ export function WorkflowLogTaskComment({
           <Tooltip
             visible={isShowTooltipEmoji}
             size="auto"
-            containerClassName={classnames(styles['comment__footer-item'], styles['is-add-emoji'])}
+            containerClassName={classnames(styles['comment__footer-item'], styles['is-add-emoji'], 'no-print')}
             content={
               isShowEmoji && (
                 <Picker

frontend/src/public/layout/MainLayout/MainLayout.css

@@ -5,27 +5,3 @@
   flex-direction: column;
   height: 100%;
 }
-
-/* Print styles need !important to override global #pneumatic-frontend and framework CSS. */
-/* stylelint-disable declaration-no-important */
-@media print {
-  html,
-  body {
-    overflow: visible !important;
-    height: auto !important;
-  }
-
-  [id='pneumatic-frontend'] {
-    overflow: visible !important;
-    height: auto !important;
-  }
-
-  main .container-fluid .row {
-    display: flex !important;
-  }
-
-  * {
-    print-color-adjust: exact;
-  }
-}
-/* stylelint-enable declaration-no-important */