feat: ability to toggle hide scrollbars for mobile devices

Author: surajbobade

desktop-app/src/renderer/components/Previewer/Device/index.tsx

@@ -458,7 +458,11 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
   }, [isInspecting]);
 
   useEffect(() => {
-    if (!ref.current || !device.isMobileCapable) {
+    if (
+      !ref.current ||
+      !device.isMobileCapable ||
+      !window.electron.store.get('userPreferences.hideScrollbarForMobile')
+    ) {
       return;
     }
 

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/HideScrollbarForMobile/index.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import Toggle from 'renderer/components/Toggle';
+
+const HideScrollBarForMobile = () => {
+  const [allowed, setAllowed] = useState<boolean>(
+    window.electron.store.get('userPreferences.hideScrollbarForMobile')
+  );
+
+  return (
+    <div className="flex flex-row items-center justify-start px-4">
+      <span className="w-1/2">Hide Scrollbar for Mobile</span>
+      <div className="flex items-center gap-2 border-l px-4 dark:border-slate-400">
+        <Toggle
+          isOn={allowed}
+          onChange={(value) => {
+            setAllowed(value.target.checked);
+            window.electron.store.set(
+              'userPreferences.hideScrollbarForMobile',
+              value.target.checked
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default HideScrollBarForMobile;

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx

@@ -10,6 +10,7 @@ import ClearHistory from './ClearHistory';
 import PreviewLayout from './PreviewLayout';
 import Bookmark from './Bookmark';
 import { Settings } from './Settings';
+import HideScrollBarForMobile from './HideScrollbarForMobile';
 
 const Divider = () => (
   <div className="h-[1px] bg-slate-200 dark:bg-slate-700" />
@@ -29,6 +30,7 @@ const MenuFlyout = ({ closeFlyout }: Props) => {
       <UITheme />
       <Devtools />
       <AllowInSecureSSL />
+      <HideScrollBarForMobile />
       <ClearHistory />
       <Divider />
       <div>

desktop-app/src/store/index.ts

@@ -138,6 +138,10 @@ const schema = {
         type: 'boolean',
         default: false,
       },
+      hideScrollbarForMobile: {
+        type: 'boolean',
+        default: true,
+      },
       guides: {
         type: 'array',
         items: {