From 1e1b0d542e30d873edd3c277ec0a4c69c3acc2f4 Mon Sep 17 00:00:00 2001
From: Joseph Izang <josephizang@gmail.com>
Date: Mon, 10 Jun 2024 15:30:59 +0100
Subject: [PATCH] adjust dragbar as per screen resolution.

---
 .../remix-app/components/dragbar/dragbar.tsx   | 12 +++++++++++-
 .../home-tab/src/lib/remix-ui-home-tab.tsx     | 18 ++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
index 339452c749..dec5f2400c 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
@@ -23,7 +23,17 @@ const DragBar = (props: IRemixDragBarUi) => {
     if (props.hidden) {
       setDragBarPosX(offset)
     } else if (props.layoutPosition === 'left') {
-      setDragBarPosX(props.minWidth + 50)
+      const checkResolution = () => {
+        const width = window.innerWidth
+        const height = window.innerHeight
+
+        if (height < 781 && width < 1150) {
+          setDragBarPosX(props.minWidth + 50)
+        } else {
+          setDragBarPosX(props.minWidth)
+        }
+      }
+      checkResolution()
       props.refObject.current.style.width = props.minWidth + 'px'
     } else if (props.layoutPosition === 'right') {
       setDragBarPosX(offset)
diff --git a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
index 04dafb614c..c3de84ee2d 100644
--- a/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
+++ b/libs/remix-ui/home-tab/src/lib/remix-ui-home-tab.tsx
@@ -32,6 +32,7 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
   }>({
     themeQuality: themes.light
   })
+  const [carouselWidth, setCarouselWidth] = useState('65%')
 
   useEffect(() => {
     plugin.call('theme', 'currentTheme').then((theme) => {
@@ -53,6 +54,23 @@ export const RemixUiHomeTab = (props: RemixUiHomeTabProps) => {
       })
     })
   }, [])
+
+  useEffect(() => {
+    const checkResolution = () => {
+      const width = window.innerWidth
+      const height = window.innerHeight
+
+      if (height < 781 && width < 1150) {
+        setCarouselWidth('70%')
+      }
+    }
+    checkResolution()
+
+    return () => {
+      checkResolution()
+    }
+  }, [])
+
   //  border-right
   return (
     <div className="d-flex flex-column w-100 h-100" data-id="remixUIHTAll">