fix: preferences on mobile webview when zoomed in (#1731)

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'}

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>
+          </Button>
-          <div className="min-w-3" />
+          <Button small className="cursor-pointer" onClick={cancelRename}>
-          <a className="cursor-pointer pt-1" 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>
   )

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

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>