Prevent column options from getting below FAB

Also take bottom bar height on consideration

packages/components/src/components/columns/ColumnOptions.tsx

@@ -12,7 +12,11 @@ import { useDimensions } from '../../hooks/use-dimensions'
 import * as actions from '../../redux/actions'
 import { useReduxAction } from '../../redux/hooks/use-redux-action'
 import * as colors from '../../styles/colors'
-import { columnHeaderHeight, contentPadding } from '../../styles/variables'
+import {
+  columnHeaderHeight,
+  contentPadding,
+  sidebarSize,
+} from '../../styles/variables'
 import {
   filterRecordHasAnyForcedValue,
   filterRecordHasThisValue,
@@ -24,7 +28,10 @@ import {
 import { AnimatedIcon } from '../animated/AnimatedIcon'
 import { CardItemSeparator } from '../cards/partials/CardItemSeparator'
 import { Checkbox } from '../common/Checkbox'
+import { fabSize } from '../common/FAB'
 import { Spacer } from '../common/Spacer'
+import { useAppLayout } from '../context/LayoutContext'
+import { fabSpacing } from '../layout/FABRenderer'
 import { ColumnHeaderItem } from './ColumnHeaderItem'
 import { ColumnOptionsRow } from './ColumnOptionsRow'
 
@@ -63,6 +70,7 @@ export function ColumnOptions(props: ColumnOptionsProps) {
   const theme = useAnimatedTheme()
   const deleteColumn = useReduxAction(actions.deleteColumn)
   const dimensions = useDimensions()
+  const { appOrientation, sizename } = useAppLayout()
   const moveColumn = useReduxAction(actions.moveColumn)
   const setColumnActivityTypeFilter = useReduxAction(
     actions.setColumnActivityTypeFilter,
@@ -74,6 +82,9 @@ export function ColumnOptions(props: ColumnOptionsProps) {
   const setColumnReasonFilter = useReduxAction(actions.setColumnReasonFilter)
   const setColumnUnreadFilter = useReduxAction(actions.setColumnUnreadFilter)
 
+  const horizontalSidebar = appOrientation === 'portrait'
+  const isFabVisible = sizename === '1-small'
+
   const toggleOpenedOptionCategory = (
     optionCategory: ColumnOptionCategory | null,
   ) =>
@@ -88,7 +99,11 @@ export function ColumnOptions(props: ColumnOptionsProps) {
       style={[
         styles.container,
         {
-          maxHeight: dimensions.window.height - columnHeaderHeight,
+          maxHeight:
+            dimensions.window.height -
+            columnHeaderHeight -
+            (horizontalSidebar ? sidebarSize : 0) -
+            (isFabVisible ? fabSize + 2 * fabSpacing : 0),
           backgroundColor: theme.backgroundColorLess08,
         },
       ]}

packages/components/src/components/layout/FABRenderer.tsx

@@ -10,9 +10,12 @@ import { buttonSize } from '../common/Button'
 import { FAB, fabSize } from '../common/FAB'
 import { useAppLayout } from '../context/LayoutContext'
 
+export const fabSpacing =
+  contentPadding / 2 + Math.max(0, (fabSize - buttonSize) / 2)
+
 const fabPositionStyle: ViewStyle = {
   position: 'absolute',
-  bottom: contentPadding / 2 + Math.max(0, (fabSize - buttonSize) / 2),
+  bottom: fabSpacing,
   right: contentPadding,
   zIndex: 101,
 }