@topconsultnpm/sdkui-react-beta 6.11.61 → 6.11.63

package/lib/components/forms/Login/RapidAccessLogin.js

@@ -258,14 +258,14 @@ const RapidAccessItem = ({ rapidAccess, isMobile = false, onRemove, onSelect, on
         handleClose();
     };
     return (_jsxs(Container, { children: [_jsxs(ItemWrapper, { children: [_jsxs(ItemProfileWrapper, { style: { zIndex: 100 - index }, onDoubleClick: () => onSelect(rapidAccess.id), children: [_jsx(PreferredIconContainer, { onClick: () => onDefault(rapidAccess.id), children: _jsx(TMTooltip, { content: SDKUI_Localizator.Default, children: rapidAccess.preferred ? _jsx(IconStarSolid, { color: TMColors.tertiary, fontSize: 20 }) : _jsx(IconStarOutline, { fontSize: 20 }) }) }), _jsx(ProfileCircle, { "$color": rapidAccess.color ?? TMColors.primary, onClick: () => setIsMenuOpen(true), children: iconMap[rapidAccess.icon] ?? _jsx(IconUser, { fontSize: 20 }) }), _jsxs("p", { children: [" ", truncateText(rapidAccess.name, 50)] })] }), _jsxs(ItemOperationsWrapper, { children: [_jsx(ExpandButton, { onClick: () => setIsExpanded(!isExpanded), children: isExpanded ? _jsx(IconCollapse, { fontSize: 16 }) : _jsx(IconExpand, { fontSize: 16 }) }), _jsx(TMButton, { color: 'primary', caption: SDKUI_Localizator.Select, showTooltip: false, onClick: () => onSelect(rapidAccess.id) }), _jsx(TMButton, { color: 'tertiary', caption: SDKUI_Localizator.Remove, showTooltip: false, onClick: onRemovePopup })] }), _jsx(Menu, { x: isMobile ? 0 : 80, y: isMobile ? -40 : 0, onClose: () => handleClose(), visible: isMenuOpen, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsxs(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: [colors.map((color, index) => (_jsx(ColorWrapper, { onClick: () => onColorPick(color), children: _jsx(ColorPicker, { "$color": color }) }, index * 2))), _jsx(ColorWrapper, { onClick: () => setShowIconMenu(!showIconMenu), children: icons.find(icon => icon[0] === rapidAccess.icon)?.[1] ?? _jsx(IconUser, {}) })] }), showIconMenu && _jsx(StyledMenuItemContainer, { style: { flexWrap: 'wrap' }, children: icons.map(([key, icon]) => (_jsx(ColorWrapper, { onClick: () => onIconPick(key), children: _jsx(ColorPicker, { "$color": "white", children: icon }) }, key))) })] }) })] }), isExpanded &&
-                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                _jsxs(ExpandedAria, { children: [_jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: name, onValueChanged: (value) => setName(value), type: 'text', label: SDKUI_Localizator.NameForAccess, additionalIcons: additionalSaveBtn }), _jsx(TextBox, { value: rapidAccess.endpoint?.Description, type: 'text', label: SDKUI_Localizator.Endpoint, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.archive?.description, type: 'text', label: SDKUI_Localizator.ArchiveID, disabled: true }), _jsx(TextBox, { value: rapidAccess.authenticationMode, type: 'text', label: SDKUI_Localizator.AuthMode, disabled: true })] }), _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: rapidAccess.username, type: 'text', label: SDKUI_Localizator.UserName, disabled: true }), _jsx(TextBox, { value: cultureIDsDataSource.find(cid => cid.value === rapidAccess.language)?.display, type: 'text', label: SDKUI_Localizator.CultureID, disabled: true })] }), hasAuthDomain && _jsxs(InputContainer, { "$isMobile": isMobile, children: [_jsx(TextBox, { value: domainValue, type: 'text', label: SDKUI_Localizator.Domain, disabled: true }), rapidAccess.authenticationMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                     _jsx(TextBox, { value: rapidAccess.onBehalfUsername, type: 'text', label: SDKUI_Localizator.UserName + ' ' + `(${SDKUI_Localizator.OnBehalfOf})`, disabled: true })] })] })] }));
 };
 const ColorWrapper = styled.div ` cursor: pointer; width: 30px; height: 30px; background-color: white; border-radius: 30px; display: flex; align-items: center; justify-content: center; `;
 const ColorPicker = styled.div ` width: 25px; height: 25px; border-radius: 25px; background-color: ${props => props.$color} ; display:flex; align-items:center; justify-content:center; `;
 const ExpandButton = styled.div ` cursor: pointer; display: flex; align-items: center; justify-content: center; `;
 const ExpandedAria = styled.div ` width: 100%; padding: 10px 0; display: flex; flex-direction: column; gap: 10px; `;
-const InputContainer = styled.div ` width: 100%; display: flex; align-items: center; gap: 10px; `;
+const InputContainer = styled.div ` width: 100%; display: flex; flex-direction:${props => props.$isMobile ? 'column' : 'row'} ; align-items: center; gap: 10px; `;
 const List = styled.div ` width: 100%; display: flex; flex-direction: column; max-height: calc(100%); overflow: visible; `;
 const ItemWrapper = styled.div ` width: 100%; display: flex; align-items: center; justify-content: space-between; position:relative;  `;
 const ItemProfileWrapper = styled.div ` display: flex; align-items: center; gap: 5px; padding: 10px 0; `;

package/lib/components/forms/Login/TMLoginForm.js

@@ -277,9 +277,9 @@ const TMLoginForm = (props) => {
         let currentHeight = window.innerHeight;
         if (!currentHeight)
             return WindowHeight.LARGE;
-        if (currentHeight > 768)
+        if (currentHeight > 730)
             return WindowHeight.LARGE;
-        if (currentHeight <= 768 && currentHeight > 680)
+        if (currentHeight <= 730 && currentHeight > 680)
             return WindowHeight.MEDIUM;
         return WindowHeight.SMALL;
     }, []);
@@ -532,9 +532,9 @@ const TMLoginForm = (props) => {
     const showVersionPopup = () => {
         TMMessageBoxManager.show({ buttons: [ButtonNames.OK], title: `About. ${SDK_Globals.appModule}`, message: _jsx(TMAboutApp, { app: true, skdui: true, sdk: true, websdk: false }) });
     };
-    return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + SDK_Globals.appModule }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsxs(StyledOverlay, { "$isMobile": isMobile, children: [" ", _jsx("img", { src: showDefaultLogo ? '/logo-default.svg' : '/logo-custom.svg', onError: () => setShowDefaultLogo(true), alt: "Logo", width: isMobile ? 110 : 180 }), " "] }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [!isMobile && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsxs(StyledLogo, { children: [_jsx("img", { src: six, alt: "six", width: 40 }), _jsxs(StyledLogoTextContainer, { children: [_jsx("div", { style: { fontWeight: 'lighter', color: 'black', fontSize: '0.9rem' }, children: "TopMedia" }), _jsx("div", { style: { fontSize: '1.3rem', color: TMColors.secondary, fontStyle: 'italic', fontWeight: 'bolder', textTransform: 'uppercase', letterSpacing: '6px' }, children: SDK_Globals.appModule })] })] })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
+    return (_jsxs(StyledWrapper, { children: [!isMobile && _jsxs(StyledVersionContainer, { children: [_jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.primary }, children: "\u25CF" }), SDK_Globals.appModule] }), _jsxs("p", { children: ["v.", SDK_Globals.appVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.tertiary }, children: "\u25CF" }), "SDKUI"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkuiVersion] })] }), _jsxs(StyledVersion, { children: [_jsxs(StyledVersionName, { children: [_jsx("span", { style: { color: TMColors.error }, children: "\u25CF" }), "SDK"] }), _jsxs("p", { children: ["v.", SDK_Globals.sdkVersion] })] })] }), _jsxs(StyledLoginContainer, { "$isMobile": isMobile, children: [_jsxs(StyledLeftSection, { "$isMobile": isMobile, children: [isMobile && _jsxs(StyledTopBar, { children: [_jsx(StyledTitle, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') + ' ' + SDK_Globals.appModule }), _jsx(StyledMobileVersionIcon, { onClick: showVersionPopup, children: _jsx(IconInfo, { fontSize: 20, color: TMColors.primary }) })] }), _jsxs(StyledOverlay, { "$isMobile": isMobile, children: [" ", _jsx("img", { src: showDefaultLogo ? '/logo-default.svg' : '/logo-custom.svg', onError: () => setShowDefaultLogo(true), alt: "Logo", width: isMobile ? 110 : 180 }), " "] }), (windowHeight === WindowHeight.LARGE || !isMobile) && _jsxs(StyledPoweredByContainer, { "$isMobile": isMobile, children: [" ", showDefaultLogo ? 'Powered by TopConsult' : _jsx("img", { src: "/logo-default.svg", alt: "Logo", width: isMobile ? 50 : 100 }), " "] })] }), _jsxs(StyledRightSection, { "$isMobile": isMobile, children: [(((getDeviceType() === 'desktop' || isDesktop) && windowHeight !== WindowHeight.SMALL) || isTablet) && _jsxs(StyledLogoContainer, { "$isMobile": isMobile, children: [_jsx(StyledWelcomeText, { children: SDKUI_Localizator.WelcomeTo.replaceParams('') }), _jsxs(StyledLogo, { children: [_jsx("img", { src: six, alt: "six", width: 40 }), _jsxs(StyledLogoTextContainer, { children: [_jsx("div", { style: { fontWeight: 'lighter', color: 'black', fontSize: '0.9rem' }, children: "TopMedia" }), _jsx("div", { style: { fontSize: '1.3rem', color: TMColors.secondary, fontStyle: 'italic', fontWeight: 'bolder', textTransform: 'uppercase', letterSpacing: '6px' }, children: SDK_Globals.appModule })] })] })] }), _jsxs(StyledToolbarContainer, { children: [_jsx(StyledLanguageChooser, { onClick: () => setShowCultureIDs(true), children: _jsx(TMTooltip, { content: SDKUI_Localizator.CultureID, children: _jsx("img", { src: getCultureIDImg(), alt: "Lang", width: 25, height: 25 }) }) }), loginStep !== 3 && _jsx(TMButton, { btnStyle: "icon", onClick: () => setShowRapidAccess(true), icon: _jsx(IconFastAccess, { fontSize: 20 }), caption: LOGINLocalizator.QuickAccess }), showPasswordOperations && _jsx(TMButton, { disabled: disablePasswordOperations, btnStyle: "icon", onClick: () => setShowChangePassword(true), icon: _jsx(IconPasswordOutline, { fontSize: 19 }), caption: SDKUI_Localizator.ChangePassword })] }), _jsxs(StyledFormContainer, { "$isMobile": isMobile, "$windowHeight": windowHeight, children: [loginStep === 1 &&
                                         _jsxs(StyledStepContainer, { children: [_jsx(Chooser, { isDropDown: isDesktop, dataSource: props.endpoints, value: 'Description', columns: accessPointChooserColumns, additionalIcons: accessPointAdditionalIcons, icon: _jsx(IconAccessPoint, {}), label: SDKUI_Localizator.Endpoint, onSelectionChanged: (ep) => { setEndpoint(ep); setDcmtArchive(undefined); }, validationItems: fieldValidations('endpoint'), selectedRow: endpoint ?? undefined }), _jsx(Chooser, { isDropDown: isDesktop, dataSource: dcmtArchives, value: 'description', columns: dcmtArchiveChooserColumns, icon: _jsx(IconArchiveDoc, {}), label: SDKUI_Localizator.ArchiveID, onSelectionChanged: (arch) => setDcmtArchive(arch), validationItems: fieldValidations('dcmtArchive'), disabled: !endpoint, selectedRow: dcmtArchive ?? undefined })] }), loginStep === 2 &&
-                                        _jsxs(StyledStepContainer, { style: { marginTop: '20px' }, children: [_jsxs(StyledSummaryContainer, { style: { position: 'absolute', top: getTopOffset(windowHeight, isMobile, isTablet), left: '50%', transform: 'translateX(-50%)', width: 'max-content' }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: endpoint?.Description })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: dcmtArchive?.description })] })] }), _jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
+                                        _jsxs(StyledStepContainer, { "$windowHeight": windowHeight, style: { marginTop: '20px' }, children: [_jsxs(StyledSummaryContainer, { style: { position: 'absolute', top: getTopOffset(windowHeight, isMobile, isTablet), left: '50%', transform: 'translateX(-50%)', width: 'max-content' }, children: [_jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Endpoint, children: _jsx(IconAccessPoint, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: endpoint?.Description })] }), _jsxs(StyledDescription, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.ArchiveID, children: _jsx(IconArchiveDoc, { color: TMColors.primary, fontSize: 16 }) }), _jsx("p", { children: dcmtArchive?.description })] })] }), _jsx(SelectBox, { value: authMode, options: authModeOptions, onValueChanged: (value) => setAuthMode(value), validationItems: fieldValidations('authenticationMode'), icon: _jsx(IconLogin, {}), label: SDKUI_Localizator.AuthMode }), _jsxs(StyledCredentialWrapper, { children: [authMode === AuthenticationModes.WindowsThroughTopMedia && _jsx(TextBox, { ref: authDomainRef, value: authDomain, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), authMode !== AuthenticationModes.MSAzure && _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameRef, secondaryRef: passwordRef, usernameValidator: fieldValidations('username'), passwordValidator: fieldValidations('password'), authMode: authMode, username: username, password: password, onUsernameChanged: (un) => setUsername(un), onPasswordChanged: (ps) => setPassword(ps) }), authMode === AuthenticationModes.TopMediaOnBehalfOf &&
                                                             _jsxs(StyledCredentialWrapper, { children: [_jsx(TextBox, { value: authDomain, ref: authDomainRef, onValueChanged: (e) => setAuthDomain(e), validationItems: fieldValidations('authDomain'), type: "text", icon: _jsx(IconWeb, {}), label: SDKUI_Localizator.Domain }), _jsx(CeredentialContainer, { isMobile: isMobile, ref: usernameOnBehalfOfRef, secondaryRef: passwordOnBehalfOfRRef, usernameValidator: fieldValidations('usernameOnBehalfOf'), passwordValidator: fieldValidations('passwordOnBehalfOf'), authMode: AuthenticationModes.TopMediaOnBehalfOf, username: usernameOnBehalf, password: passwordOnBehalf, onUsernameChanged: (un) => setUsernameOnBehalf(un), onPasswordChanged: (ps) => setPasswordOnBehalf(ps) })] })] }), authMode !== AuthenticationModes.TopMediaWithMFA &&
                                                     _jsx(RapidAccessContainer, { isSaveEnable: saveLoginEnable, name: saveLoginName, nameValidationItems: fieldValidations('rapidAccessName'), onEnableSaveChange: () => setSaveLoginEnable(!saveLoginEnable), onNameChange: (name) => setSaveLoginName(name) })] }), loginStep === 3 &&
                                         _jsxs(StyledStepThreeContainer, { "$isMobile": isMobile, children: [_jsx(OTPReader, { isMobile: isMobile, digits: otpCode, onChange: handleDigitChange, onFullChange: handleFullChange, text: _jsxs("div", { children: [" ", LOGINLocalizator.EnterOtpInstructions, " "] }), header: '', additionalButtons: [
@@ -564,23 +564,23 @@ const CeredentialContainer = forwardRef(({ isMobile = false, authMode = Authenti
 const RapidAccessContainer = ({ isSaveEnable, name, nameValidationItems, onEnableSaveChange, onNameChange }) => {
     return (_jsxs(StyledRapidLoginSave, { children: [_jsx(TMCheckBox, { label: LOGINLocalizator.CreateNewQuickAccess, onValueChanged: () => onEnableSaveChange(), value: isSaveEnable, labelColor: "#313131" }), isSaveEnable && _jsx(TextBox, { validationItems: nameValidationItems, disabled: !isSaveEnable, type: "text", value: name, onValueChanged: (value) => onNameChange(value), placeHolder: "Es: Admin risorse umane" })] }));
 };
+const getDeviceType = () => {
+    const ua = navigator.userAgent;
+    const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    if (/Mobi|Android/i.test(ua))
+        return 'mobile';
+    if (/iPad|Tablet/i.test(ua) || (isTouch && /Macintosh/i.test(ua)))
+        return 'tablet';
+    return 'desktop';
+};
 const getTopOffset = (windowHeight, isMobile, isTablet) => {
-    const getDeviceType = () => {
-        const ua = navigator.userAgent;
-        const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-        if (/Mobi|Android/i.test(ua))
-            return 'mobile';
-        if (/iPad|Tablet/i.test(ua) || (isTouch && /Macintosh/i.test(ua)))
-            return 'tablet';
-        return 'desktop';
-    };
     if (windowHeight === WindowHeight.LARGE) {
         if (isMobile)
             return '70px';
         if (isTablet)
             return '130px';
         if (getDeviceType() !== 'desktop')
-            return '140px';
+            return '120px';
         return '180px';
     }
     if (windowHeight === WindowHeight.MEDIUM) {
@@ -632,7 +632,7 @@ const StyledSummaryContainer = styled.div ` display: flex; align-items: center;
 const StyledCredentialContainer = styled.div ` width: '100%'; display: flex; flex-direction: ${props => getFlexDirection(props.$isMobile, props.$authMode)}; gap: 10px; `;
 const StyledCredentialWrapper = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; `;
 const StyledToolbarContainer = styled.div ` display: flex; gap: 10px; align-items: center; position: absolute; top: 20px; right: 20px; `;
-const StyledStepContainer = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; overflow: auto; `;
+const StyledStepContainer = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; overflow: auto; padding-right: ${props => props.$windowHeight === WindowHeight.LARGE ? '0' : '5px'};`;
 const StyledStepThreeContainer = styled.div ` width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px ${props => props.$isMobile ? '0' : '60px'}; `;
 const StyledRapidAccessWrapper = styled.div `width:100%; margin-top:${props => props.$isMobile ? '0' : '30px'};`;
 const StyledMenuItemContainer = styled.div `display:flex;align-items:center;gap:10px;padding:5px;`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react-beta",
-  "version": "6.11.61",
+  "version": "6.11.63",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",