[core] Update sidecar layout

widatama · widatama · commit 67610b6f7def · 2025-01-30T09:13:21.000+07:00
diff --git a/frontend/express/public/stylesheets/vue/clyvue.scss b/frontend/express/public/stylesheets/vue/clyvue.scss
@@ -1788,7 +1788,6 @@
         }
         &__right-sidecar {
             height: 100%;
-            position: absolute;
             right: 0;
         }
         &__steps-view {
@@ -1799,9 +1798,26 @@
         }
 
         &.has-right-sidecar {
+            display: flex;
+            flex-direction: row;
+
             .cly-vue-drawer__steps-view {
-                left: 0;
-                right: unset;
+                position: relative;
+                flex-grow: 1;
+                display: flex;
+                justify-content: center;
+            }
+
+            .cly-vue-drawer__steps-container {
+                position: relative;
+            }
+
+            .cly-vue-drawer__steps-wrapper {
+                max-width: 840px;
+            }
+
+            .cly-vue-drawer__right-sidecar {
+                max-width: 480px;
             }
         }
 
@@ -1834,7 +1850,7 @@
                           }
                         
                     }
-                    .cly-vue-drawer__sidecars-view, .cly-vue-drawer__right-sidecar {
+                    .cly-vue-drawer__sidecars-view {
                         @if $i == 12 {
                             width: 0%;
                           } 
@@ -4330,7 +4346,6 @@
           margin-left: 10px;
         }
     }		
-<<<<<<< HEAD
 }
 
 

Original file line number	Diff line number	Diff line change
`@@ -1788,7 +1788,6 @@`
`1788`	`1788`	`}`
`1789`	`1789`	`&__right-sidecar {`
`1790`	`1790`	`height: 100%;`
`1791`		`- position: absolute;`
`1792`	`1791`	`right: 0;`
`1793`	`1792`	`}`
`1794`	`1793`	`&__steps-view {`
`@@ -1799,9 +1798,26 @@`
`1799`	`1798`	`}`
`1800`	`1799`
`1801`	`1800`	`&.has-right-sidecar {`
	`1801`	`+ display: flex;`
	`1802`	`+ flex-direction: row;`
	`1803`	`+`
`1802`	`1804`	`.cly-vue-drawer__steps-view {`
`1803`		`- left: 0;`
`1804`		`- right: unset;`
	`1805`	`+ position: relative;`
	`1806`	`+ flex-grow: 1;`
	`1807`	`+ display: flex;`
	`1808`	`+ justify-content: center;`
	`1809`	`+ }`
	`1810`	`+`
	`1811`	`+ .cly-vue-drawer__steps-container {`
	`1812`	`+ position: relative;`
	`1813`	`+ }`
	`1814`	`+`
	`1815`	`+ .cly-vue-drawer__steps-wrapper {`
	`1816`	`+ max-width: 840px;`
	`1817`	`+ }`
	`1818`	`+`
	`1819`	`+ .cly-vue-drawer__right-sidecar {`
	`1820`	`+ max-width: 480px;`
`1805`	`1821`	`}`
`1806`	`1822`	`}`
`1807`	`1823`
`@@ -1834,7 +1850,7 @@`
`1834`	`1850`	`}`
`1835`	`1851`
`1836`	`1852`	`}`
`1837`		`- .cly-vue-drawer__sidecars-view, .cly-vue-drawer__right-sidecar {`
	`1853`	`+ .cly-vue-drawer__sidecars-view {`
`1838`	`1854`	`@if $i == 12 {`
`1839`	`1855`	`width: 0%;`
`1840`	`1856`	`}`
`@@ -4330,7 +4346,6 @@`
`4330`	`4346`	`margin-left: 10px;`
`4331`	`4347`	`}`
`4332`	`4348`	`}`
`4333`		`-<<<<<<< HEAD`
`4334`	`4349`	`}`
`4335`	`4350`
`4336`	`4351`