fix: fixes issue where add button would not be visible at times on iOS (#2087)

* fix: fixes issue where add button would not be visible at times on iOS

* fix: fixes issue where screens could not be navigated with certain window sizes

packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx

@@ -35,6 +35,8 @@ import { ListableContentItem } from './Types/ListableContentItem'
 import { FeatureName } from '@/Controllers/FeatureName'
 import { PanelResizedData } from '@/Types/PanelResizedData'
 import { useForwardedRef } from '@/Hooks/useForwardedRef'
+import { isMobileScreen } from '@/Utils'
+import FloatingAddButton from './FloatingAddButton'
 
 type Props = {
   accountMenuController: AccountMenuController
@@ -285,6 +287,9 @@ const ContentListView = forwardRef<HTMLDivElement, Props>(
         aria-label={'Notes & Files'}
         ref={innerRef}
       >
+        {isMobileScreen() && (
+          <FloatingAddButton onClick={addNewItem} label={addButtonLabel} style={dailyMode ? 'danger' : 'info'} />
+        )}
         <div id="items-title-bar" className="section-title-bar border-b border-solid border-border">
           <div id="items-title-bar-container">
             {selectedTag && (

packages/web/src/javascripts/Components/ContentListView/FloatingAddButton.tsx

@@ -0,0 +1,34 @@
+import { classNames } from '@standardnotes/snjs'
+import { ButtonStyle, getColorsForPrimaryVariant } from '../Button/Button'
+import Icon from '../Icon/Icon'
+
+type Props = {
+  label: string
+  style: ButtonStyle
+  onClick?: () => void
+}
+
+const PropertiesRequiredForFixedPositioningToWorkOnIOSSafari: React.CSSProperties = {
+  transform: 'translate3d(0, 0, 0)',
+}
+
+const FloatingAddButton = ({ label, style, onClick }: Props) => {
+  const buttonClasses = getColorsForPrimaryVariant(style)
+  return (
+    <button
+      className={classNames(
+        'fixed bottom-6 right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
+        `justify-center rounded-full border border-solid border-transparent ${buttonClasses}`,
+        'hover:brightness-125',
+      )}
+      title={label}
+      aria-label={label}
+      onClick={onClick}
+      style={PropertiesRequiredForFixedPositioningToWorkOnIOSSafari}
+    >
+      <Icon type="add" size="custom" className="h-8 w-8" />
+    </button>
+  )
+}
+
+export default FloatingAddButton

packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx

@@ -86,17 +86,18 @@ const ContentListHeader = ({
     return (
       <button
         className={classNames(
-          'fixed bottom-6 right-6 z-editor-title-bar ml-3 flex h-15 w-15 cursor-pointer items-center',
+          'hidden md:flex',
+          'h-8 w-8 hover:brightness-125',
+          'z-editor-title-bar ml-3  cursor-pointer items-center',
           `justify-center rounded-full border border-solid border-transparent ${
             isDailyEntry ? 'bg-danger text-danger-contrast' : 'bg-info text-info-contrast'
           }`,
-          'hover:brightness-125 md:static md:h-8 md:w-8',
         )}
         title={addButtonLabel}
         aria-label={addButtonLabel}
         onClick={addNewItem}
       >
-        <Icon type="add" size="custom" className="h-8 w-8 md:h-5 md:w-5" />
+        <Icon type="add" size="custom" className="h-5 w-5" />
       </button>
     )
   }, [addButtonLabel, addNewItem, isDailyEntry])