Skip to content

Commit 27acc12

Browse files
rushi-tekdirushi-tekdi
authored
Merge pull request #2588 from tekdi/feat-direct-enroll
Feat direct enroll to prod register
2 parents c0ad37d + 5593adb commit 27acc12

File tree

1 file changed

+70
-27
lines changed

1 file changed

+70
-27
lines changed

‎libs/shared-lib-v2/src/lib/CertificateModal/CertificateModal.tsx‎

Lines changed: 70 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const style = {
3838
xs: '99vh',
3939
'@media (orientation: landscape)': '99vh'
4040
},
41+
maxWidth: '99vw',
4142
maxHeight: '99vh',
4243
bgcolor: 'background.paper',
4344
borderRadius: { xs: 2, '@media (orientation: landscape)': 0 },
@@ -136,24 +137,38 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
136137
<html>
137138
<head>
138139
<meta charset="utf-8">
139-
<meta name="viewport" content="width=1024, initial-scale=0.5, maximum-scale=2.0, user-scalable=yes">
140+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
140141
<style>
141-
body {
142+
html, body {
142143
margin: 0;
143-
padding: 20px;
144+
padding: 0;
144145
font-family: Arial, sans-serif;
145-
min-width: 800px;
146146
width: 100%;
147+
height: 100%;
147148
box-sizing: border-box;
148149
background: white;
150+
overflow-x: hidden;
149151
}
150152
* {
151153
box-sizing: border-box;
152154
}
153-
body {
154-
min-width: 800px;
155-
transform-origin: top left;
156-
zoom: 0.8;
155+
.main-container {
156+
width: 100% !important;
157+
min-width: 100% !important;
158+
padding: 10px !important;
159+
overflow-x: hidden !important;
160+
display: flex !important;
161+
justify-content: center !important;
162+
align-items: flex-start !important;
163+
}
164+
.scale-container {
165+
max-width: 100% !important;
166+
margin: 0 auto !important;
167+
display: flex !important;
168+
justify-content: center !important;
169+
position: relative !important;
170+
left: 0 !important;
171+
right: 0 !important;
157172
}
158173
div[style*="font-family"],
159174
.certificate-container {
@@ -163,10 +178,20 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
163178
</style>
164179
<script>
165180
window.addEventListener('load', function() {
166-
const scale = Math.min(window.innerWidth / 850, 1);
167-
document.body.style.transform = 'scale(' + scale + ')';
168-
document.body.style.transformOrigin = 'top left';
169-
document.body.style.width = (100 / scale) + '%';
181+
const container = document.querySelector('.scale-container');
182+
if (container) {
183+
const scale = Math.min((window.innerWidth - 20) / 1100, 1);
184+
container.style.transform = 'scale(' + scale + ')';
185+
container.style.transformOrigin = 'center top';
186+
}
187+
});
188+
189+
window.addEventListener('resize', function() {
190+
const container = document.querySelector('.scale-container');
191+
if (container) {
192+
const scale = Math.min((window.innerWidth - 20) / 1100, 1);
193+
container.style.transform = 'scale(' + scale + ')';
194+
}
170195
});
171196
</script>
172197
</head>
@@ -210,26 +235,27 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
210235
sx={{
211236
width: '100%',
212237
height: '100%',
213-
display: 'flex',
214-
overflow: deviceType === 'mobile' ? 'auto' : 'hidden',
238+
minWidth: 0,
239+
minHeight: 0,
240+
display: 'block',
241+
overflow: 'visible',
215242
}}
216243
>
217244
<iframe
218245
key={deviceType}
219246
src={dataUri}
220247
title="Certificate"
221248
onLoad={onLoad}
249+
scrolling="auto"
222250
style={{
223251
width: '100%',
224-
height:
225-
deviceType === 'mobile'
226-
? '1000px'
227-
: window.innerHeight > window.innerWidth
228-
? '1200px'
229-
: '90vh',
230-
minHeight: '700px',
252+
height: '100%',
253+
minWidth: '100%',
254+
minHeight: '100%',
231255
border: 'none',
232256
backgroundColor: 'white',
257+
display: 'block',
258+
boxSizing: 'border-box',
233259
}}
234260
/>
235261
</Box>
@@ -288,6 +314,7 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
288314
display: 'flex',
289315
flexDirection: 'column',
290316
position: 'relative',
317+
boxSizing: 'border-box',
291318
}}
292319
>
293320
{/* Top Bar */}
@@ -320,16 +347,14 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
320347
flex: 1,
321348
position: 'relative',
322349
width: '100%',
323-
minHeight: '700px',
324-
height: {
325-
xs: 'calc(95vh - 100px)',
326-
'@media (orientation: landscape)': 'calc(98vh - 100px)',
327-
},
350+
maxWidth: '100%',
351+
minHeight: 0,
328352
overflow: 'hidden',
329353
backgroundColor: 'background.paper',
330354
display: 'flex',
331355
alignItems: 'center',
332356
justifyContent: 'center',
357+
boxSizing: 'border-box',
333358
}}
334359
>
335360
{/* ✅ Fixed Loader */}
@@ -358,8 +383,26 @@ export const CertificateModal: React.FC<CertificateModalProps> = ({
358383
transition: 'opacity 0.3s ease-in-out',
359384
width: '100%',
360385
height: '100%',
386+
maxWidth: '100%',
387+
maxHeight: '100%',
361388
zIndex: isIframeLoaded ? 1 : 0,
362-
overflowY: 'auto',
389+
overflow: 'auto',
390+
WebkitOverflowScrolling: 'touch',
391+
boxSizing: 'border-box',
392+
'&::-webkit-scrollbar': {
393+
width: '12px',
394+
height: '12px',
395+
},
396+
'&::-webkit-scrollbar-track': {
397+
background: '#f1f1f1',
398+
},
399+
'&::-webkit-scrollbar-thumb': {
400+
background: '#888',
401+
borderRadius: '6px',
402+
'&:hover': {
403+
background: '#555',
404+
},
405+
},
363406
}}
364407
>
365408
<CertificatePage

0 commit comments

Comments
 (0)