Fixed non rotatable devices rotating when "Rotate All" button in top of GUI is pressed (#1439)

* added checks for if a device is rotatable on the rotate all devices button-- rotation on individual devices still rotates regardless of device properties

* fixed request for pr

* fixed build errors

* Reused the conditional

---------

Co-authored-by: Manoj Vivek <[email protected]>

Author: mklikushin

desktop-app/src/renderer/components/Button/index.tsx

@@ -11,6 +11,7 @@ interface CustomProps {
   disableHoverEffects?: boolean;
   isActionButton?: boolean;
   subtle?: boolean;
+  disabled?: boolean;
 }
 
 const Button = ({
@@ -22,6 +23,7 @@ const Button = ({
   isActionButton = false,
   subtle = false,
   disableHoverEffects = false,
+  disabled = false,
   children,
   ...props
 }: CustomProps &
@@ -66,9 +68,12 @@ const Button = ({
           'bg-slate-200': isActionButton,
           'dark:bg-slate-700': isActionButton,
           'px-2': isActionButton || isTextButton,
+          'cursor-not-allowed opacity-40': disabled,
+          'hover:bg-transparent dark:hover:bg-transparent': disabled,
         }
       )}
       type="button"
+      disabled={disabled}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     >

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

@@ -19,15 +19,9 @@ interface Props {
   onRotate: (state: boolean) => void;
   onIndividualLayoutHandler: (device: Device) => void;
   isIndividualLayout: boolean;
+  isDeviceRotationEnabled: boolean;
 }
 
-const newVersionText = {
-  id: 'new-version',
-  text: 'There is a new version available.',
-  link: 'https://responsively.app/download',
-  linkText: 'See More',
-};
-
 const Toolbar = ({
   webview,
   device,
@@ -37,6 +31,7 @@ const Toolbar = ({
   onRotate,
   onIndividualLayoutHandler,
   isIndividualLayout,
+  isDeviceRotationEnabled,
 }: Props) => {
   const [eventMirroringOff, setEventMirroringOff] = useState<boolean>(false);
   const [playScreenshotDone] = useSound(screenshotSfx, { volume: 0.5 });
@@ -194,7 +189,15 @@ const Toolbar = ({
         <Button onClick={openDevTools} title="Open Devtools">
           <Icon icon="ic:round-code" />
         </Button>
-        <Button onClick={rotate} title="Rotate This Device">
+        <Button
+          onClick={rotate}
+          disabled={!isDeviceRotationEnabled}
+          title={
+            isDeviceRotationEnabled
+              ? 'Rotate This Device'
+              : 'Rotation not available for non-mobile devices'
+          }
+        >
           <Icon
             icon={
               rotated

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

@@ -95,20 +95,24 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
         const currentUrl = ref.current.getURL();
         if (address !== currentUrl) {
           isNavigatingFromAddressBar.current = true;
-          dispatch(setAddress(address));
+          ref.current.loadURL(address);
         }
       } catch (err) {
         // eslint-disable-next-line no-console
         console.error('Error loading URL', err);
       }
     }
-  }, [address, isPrimary, dispatch]);
+  }, [address, isPrimary]);
 
   const isIndividualLayout = layout === PREVIEW_LAYOUTS.INDIVIDUAL;
 
   let { height, width } = device;
 
-  if (rotateDevices || singleRotated) {
+  // Check if device rotation is enabled (only mobile-capable devices can be rotated)
+  const isDeviceRotationEnabled = device.isMobileCapable && (rotateDevices || singleRotated);
+  
+  // Apply rotation: both global and individual rotation only affect mobile-capable devices
+  if (isDeviceRotationEnabled) {
     const temp = width;
     width = height;
     height = temp;
@@ -531,7 +535,9 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
   const scaledWidth = width * zoomfactor;
 
   const isRestrictedMinimumDeviceSize =
-    device.width < 400 && zoomfactor < 0.6 && !rotateDevices && !singleRotated;
+    device.width < 400 &&
+    zoomfactor < 0.6 &&
+    !isDeviceRotationEnabled;
 
   return (
     <div
@@ -557,6 +563,7 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
         onRotate={onRotateHandler}
         onIndividualLayoutHandler={onIndividualLayoutHandler}
         isIndividualLayout={isIndividualLayout}
+        isDeviceRotationEnabled={isDeviceRotationEnabled}
       />
       <div
         style={{
@@ -603,7 +610,7 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
             preload={`file://${window.responsively.webviewPreloadPath}`}
             data-scale-factor={zoomfactor}
             /* eslint-disable-next-line react/no-unknown-property */
-            allowpopups={isPrimary ? ('true' as any) : undefined}
+            allowpopups={isPrimary ? true : undefined}
             /* eslint-disable-next-line react/no-unknown-property */
             useragent={device.userAgent}
           />