adjust dragbar as per screen resolution.

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)

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">