From 782cbee97e2b2ec9e0e5a930d883e2fc1c7d3f1c Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 4 Oct 2022 17:24:48 +0530
Subject: [PATCH] fix: preferences on mobile webview when zoomed in (#1731)

---
 .../Panes/General/Advanced/AdvancedSection.tsx |  2 +-
 .../Advanced/Packages/PackageEntrySubInfo.tsx  | 18 ++++++++----------
 .../PreferencesComponents/PreferencesGroup.tsx |  4 +++-
 .../PreferencesComponents/PreferencesPane.tsx  |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx
index 042e75227..abf67b407 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/AdvancedSection.tsx
@@ -21,7 +21,7 @@ const Advanced: FunctionComponent<Props> = ({ application, viewControllerManager
       <PreferencesSegment>
         <AccordionItem title={'Advanced Options'}>
           <div className="flex flex-row items-center">
-            <div className="flex flex-grow flex-col">
+            <div className="flex max-w-full flex-grow flex-col">
               <OfflineSubscription application={application} viewControllerManager={viewControllerManager} />
               <PackagesPreferencesSection
                 className={'mt-3'}
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx
index 899236bd9..7f696d0d8 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/Advanced/Packages/PackageEntrySubInfo.tsx
@@ -1,3 +1,4 @@
+import Button from '@/Components/Button/Button'
 import { FunctionComponent, useState, useRef, useEffect } from 'react'
 
 type Props = {
@@ -39,7 +40,7 @@ const PackageEntrySubInfo: FunctionComponent<Props> = ({ extensionName, changeNa
   }
 
   return (
-    <div className="mr-3 flex flex-row items-center">
+    <div className="flex flex-row flex-wrap items-center gap-3">
       <input
         ref={inputRef}
         disabled={!isRenaming || !renameable}
@@ -50,24 +51,21 @@ const PackageEntrySubInfo: FunctionComponent<Props> = ({ extensionName, changeNa
         onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
       />
 
-      <div className="min-w-3" />
-
       {isRenaming && (
         <>
-          <a className="cursor-pointer pt-1" onClick={confirmRename}>
+          <Button small className="cursor-pointer" onClick={confirmRename}>
             Confirm
-          </a>
-          <div className="min-w-3" />
-          <a className="cursor-pointer pt-1" onClick={cancelRename}>
+          </Button>
+          <Button small className="cursor-pointer" onClick={cancelRename}>
             Cancel
-          </a>
+          </Button>
         </>
       )}
 
       {renameable && !isRenaming && (
-        <a className="cursor-pointer pt-1" onClick={startRenaming}>
+        <Button small className="cursor-pointer" onClick={startRenaming}>
           Rename
-        </a>
+        </Button>
       )}
     </div>
   )
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
index 84cb51c7f..cb4477872 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx
@@ -3,7 +3,9 @@ import { FunctionComponent, ReactNode } from 'react'
 const PreferencesGroup: FunctionComponent<{
   children: ReactNode
 }> = ({ children }) => (
-  <div className="mb-3 flex flex-col rounded border border-solid border-border bg-default p-6">{children}</div>
+  <div className="mb-3 flex max-w-full flex-col rounded border border-solid border-border bg-default p-6">
+    {children}
+  </div>
 )
 
 export default PreferencesGroup
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
index fc0fe804d..446082b9f 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent, ReactNode } from 'react'
 const PreferencesPane: FunctionComponent<{ children?: ReactNode }> = ({ children }) => (
   <div className="flex min-h-0 flex-grow flex-col overflow-y-auto text-foreground md:flex-row">
     <div className="flex flex-grow flex-col items-center px-3 py-6 md:px-0">
-      <div className="flex flex-col md:w-125 md:max-w-125">
+      <div className="flex max-w-full flex-col md:w-125 md:max-w-125">
         {children != undefined && Array.isArray(children) ? children.filter((child) => child != undefined) : children}
       </div>
     </div>