From e02b264b90fb2fb6ba8366a5e33e391862207f9b Mon Sep 17 00:00:00 2001
From: Nedal <73669345+cipherlogs@users.noreply.github.com>
Date: Wed, 6 Mar 2024 13:06:09 +0100
Subject: [PATCH] [joy-ui][

Signed-off-by: Nedal <73669345+cipherlogs@users.noreply.github.com>
---
 .../getting-started/templates/sign-in-side/App.tsx  | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
index 5f129f94cc6a46..92d8c2bb186704 100644
--- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
+++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
@@ -66,8 +66,6 @@ export default function JoySignInSideTemplate() {
       <GlobalStyles
         styles={{
           ':root': {
-            '--Collapsed-breakpoint': '769px', // form will stretch when viewport is below `769px`
-            '--Cover-width': '50vw', // must be `vw` only
             '--Form-maxWidth': '800px',
             '--Transition-duration': '0.4s', // set to `none` to disable transition
           },
@@ -75,8 +73,8 @@ export default function JoySignInSideTemplate() {
       />
       <Box
         sx={(theme) => ({
-          width:
-            'clamp(100vw - var(--Cover-width), (var(--Collapsed-breakpoint) - 100vw) * 999, 100vw)',
+          width: '100vw',
+          [theme.breakpoints.up(769)]: { width: '50vw' },
           transition: 'width var(--Transition-duration)',
           transitionDelay: 'calc(var(--Transition-duration) + 0.1s)',
           position: 'relative',
@@ -95,9 +93,7 @@ export default function JoySignInSideTemplate() {
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100dvh',
-            width:
-              'clamp(var(--Form-maxWidth), (var(--Collapsed-breakpoint) - 100vw) * 999, 100%)',
-            maxWidth: '100%',
+            width: "100%",
             px: 2,
           }}
         >
@@ -229,7 +225,8 @@ export default function JoySignInSideTemplate() {
           right: 0,
           top: 0,
           bottom: 0,
-          left: 'clamp(0px, (100vw - var(--Collapsed-breakpoint)) * 999, 100vw - var(--Cover-width))',
+          left: 0,
+          [theme.breakpoints.up(769)]: { left: '50vw' },
           transition:
             'background-image var(--Transition-duration), left var(--Transition-duration) !important',
           transitionDelay: 'calc(var(--Transition-duration) + 0.1s)',