fix(v1.5.0): certificate overflowing on the preview screen (#7193)

* Placeholder commit for PR #7157

* fix: certificate overflowing on the preview screen (#7157)

* fix: certificate overflowing on the preview screen

* fix: add the mobile title/actions back

* fix: linter not understanding css comment

* chore(changelog)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Pyry Rouvila <pyry@opencrvs.org>

CHANGELOG.md

@@ -65,6 +65,9 @@
 - Fix Removed duplicateTrackingId check in createDuplicateTask method [#7081](https://github.com/opencrvs/opencrvs-core/pull/7081)
 - Fix print record page for an unsaved declaration [#6893](https://github.com/opencrvs/opencrvs-core/issues/6893)
 - Fix Reset pagination to default page (1) when location changes in UserList [#6481](https://github.com/opencrvs/opencrvs-core/issues/6481)
+- Fix Disabling 'Mark as duplicate' button when duplicate reason is empty too [#7083](https://github.com/opencrvs/opencrvs-core/pull/7083)
+- Fix certificate overflowing in preview certificate view [#7157](https://github.com/opencrvs/opencrvs-core/pull/7157)
+- Fix records going completely missing when an unexpected error happens in the backend [#7021](https://github.com/opencrvs/opencrvs-core/pull/7021)
 
 ## Refactor
 

packages/client/src/views/PrintCertificate/ReviewCertificateAction.tsx

@@ -33,7 +33,12 @@ import styled from 'styled-components'
 import { constantsMessages } from '@client/i18n/messages'
 import { usePrintableCertificate } from './usePrintableCertificate'
 
-const CertificateContainer = styled.div``
+const CertificateContainer = styled.div`
+  svg {
+    /* limits the certificate overflowing on small screens */
+    max-width: 100%;
+  }
+`
 
 const ReviewCertificateFrame = ({
   children
@@ -77,6 +82,22 @@ const ReviewCertificateFrame = ({
               <Icon name="X" size="large" />
             </Button>
           }
+          mobileTitle={intl.formatMessage(
+            certificateMessages.certificateCollectionTitle
+          )}
+          mobileLeft={
+            <Button type="icon" onClick={back} id="action_page_back_button">
+              <Icon name="ArrowLeft" size="large" />
+            </Button>
+          }
+          mobileRight={
+            <Button
+              type="icon"
+              onClick={() => dispatch(goToHomeTab(WORKQUEUE_TABS.readyToPrint))}
+            >
+              <Icon name="X" size="large" />
+            </Button>
+          }
         />
       }
       skipToContentText={intl.formatMessage(