Add quiete zone and responsive handling

sulu · Apr 13, 2022 · fd6cd8b · fd6cd8b
1 parent fb93a31
commit fd6cd8b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/QRCode.js b/src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/QRCode.js
@@ -15,6 +15,7 @@ export default class QRCode<T: ?string | ?number> extends React.PureComponent<QR
                 <QRCodeComponent
                     className={qrCodeStyles.qrcode}
                     value={this.props.value || ''}
+                    viewBox='0 0 256 256'
                 />
             </Fragment>
         );

diff --git a/src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/qrcode.scss b/src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/qrcode.scss
@@ -2,7 +2,9 @@
 
 .qrcode {
     background: white;
-    box-sizing: content-box;
+    height: auto;
     margin-top: 20px;
-    padding: 6px;
+    max-width: 100%;
+    padding: 16px;
+    width: auto;
 }
diff --git a/...Bundle/AdminBundle/Resources/js/components/QRCode/tests/__snapshots__/QRCode.test.js.snap b/...Bundle/AdminBundle/Resources/js/components/QRCode/tests/__snapshots__/QRCode.test.js.snap
@@ -13,6 +13,7 @@ Array [
   <svg
     class="qrcode"
     height="256"
+    viewBox="0 0 256 256"
     width="256"
     xmlns="http://www.w3.org/2000/svg"
   >