Fix bottom navbar overlaying content in mobile (#5166)

packages/desktop-client/src/components/mobile/accounts/Accounts.tsx

@@ -322,13 +322,13 @@ function AllAccountList({
         />
       }
       padding={0}
-      style={{
-        paddingBottom: MOBILE_NAV_HEIGHT,
-      }}
     >
       {accounts.length === 0 && <EmptyMessage />}
       <PullToRefresh onRefresh={onSync}>
-        <View aria-label={t('Account list')} style={{ margin: 10 }}>
+        <View
+          aria-label={t('Account list')}
+          style={{ margin: 10, paddingBottom: MOBILE_NAV_HEIGHT }}
+        >
           {onBudgetAccounts.length > 0 && (
             <AccountHeader
               id="onbudget"

packages/desktop-client/src/components/reports/Overview.tsx

@@ -519,87 +519,91 @@ export function Overview() {
         )
       }
       padding={10}
-      style={{ paddingBottom: MOBILE_NAV_HEIGHT }}
     >
       {isImporting ? (
         <LoadingIndicator message={t('Import is running...')} />
       ) : (
-        <View data-testid="reports-overview" style={{ userSelect: 'none' }}>
-          <ResponsiveGridLayout
-            breakpoints={{ desktop: breakpoints.medium, mobile: 1 }}
-            layouts={{ desktop: desktopLayout, mobile: mobileLayout }}
-            onLayoutChange={
-              currentBreakpoint === 'desktop' ? onLayoutChange : undefined
-            }
-            onBreakpointChange={onBreakpointChange}
-            cols={{ desktop: 12, mobile: 1 }}
-            rowHeight={100}
-            draggableCancel={`.${NON_DRAGGABLE_AREA_CLASS_NAME}`}
-            isDraggable={currentBreakpoint === 'desktop' && isEditing}
-            isResizable={currentBreakpoint === 'desktop' && isEditing}
+        <div>
+          <View
+            data-testid="reports-overview"
+            style={{ userSelect: 'none', paddingBottom: MOBILE_NAV_HEIGHT }}
           >
-            {desktopLayout.map(item => (
-              <div key={item.i}>
-                {item.type === 'net-worth-card' ? (
-                  <NetWorthCard
-                    widgetId={item.i}
-                    isEditing={isEditing}
-                    accounts={accounts}
-                    meta={item.meta}
-                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : item.type === 'cash-flow-card' ? (
-                  <CashFlowCard
-                    widgetId={item.i}
-                    isEditing={isEditing}
-                    meta={item.meta}
-                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : item.type === 'spending-card' ? (
-                  <SpendingCard
-                    widgetId={item.i}
-                    isEditing={isEditing}
-                    meta={item.meta}
-                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : item.type === 'markdown-card' ? (
-                  <MarkdownCard
-                    isEditing={isEditing}
-                    meta={item.meta}
-                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : item.type === 'custom-report' ? (
-                  <CustomReportListCards
-                    isEditing={isEditing}
-                    report={customReportMap.get(item.meta.id)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : item.type === 'summary-card' ? (
-                  <SummaryCard
-                    widgetId={item.i}
-                    isEditing={isEditing}
-                    meta={item.meta}
-                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : item.type === 'calendar-card' ? (
-                  <CalendarCard
-                    widgetId={item.i}
-                    isEditing={isEditing}
-                    meta={item.meta}
-                    firstDayOfWeekIdx={firstDayOfWeekIdx}
-                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
-                    onRemove={() => onRemoveWidget(item.i)}
-                  />
-                ) : null}
-              </div>
-            ))}
-          </ResponsiveGridLayout>
-        </View>
+            <ResponsiveGridLayout
+              breakpoints={{ desktop: breakpoints.medium, mobile: 1 }}
+              layouts={{ desktop: desktopLayout, mobile: mobileLayout }}
+              onLayoutChange={
+                currentBreakpoint === 'desktop' ? onLayoutChange : undefined
+              }
+              onBreakpointChange={onBreakpointChange}
+              cols={{ desktop: 12, mobile: 1 }}
+              rowHeight={100}
+              draggableCancel={`.${NON_DRAGGABLE_AREA_CLASS_NAME}`}
+              isDraggable={currentBreakpoint === 'desktop' && isEditing}
+              isResizable={currentBreakpoint === 'desktop' && isEditing}
+            >
+              {desktopLayout.map(item => (
+                <div key={item.i}>
+                  {item.type === 'net-worth-card' ? (
+                    <NetWorthCard
+                      widgetId={item.i}
+                      isEditing={isEditing}
+                      accounts={accounts}
+                      meta={item.meta}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : item.type === 'cash-flow-card' ? (
+                    <CashFlowCard
+                      widgetId={item.i}
+                      isEditing={isEditing}
+                      meta={item.meta}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : item.type === 'spending-card' ? (
+                    <SpendingCard
+                      widgetId={item.i}
+                      isEditing={isEditing}
+                      meta={item.meta}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : item.type === 'markdown-card' ? (
+                    <MarkdownCard
+                      isEditing={isEditing}
+                      meta={item.meta}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : item.type === 'custom-report' ? (
+                    <CustomReportListCards
+                      isEditing={isEditing}
+                      report={customReportMap.get(item.meta.id)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : item.type === 'summary-card' ? (
+                    <SummaryCard
+                      widgetId={item.i}
+                      isEditing={isEditing}
+                      meta={item.meta}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : item.type === 'calendar-card' ? (
+                    <CalendarCard
+                      widgetId={item.i}
+                      isEditing={isEditing}
+                      meta={item.meta}
+                      firstDayOfWeekIdx={firstDayOfWeekIdx}
+                      onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                      onRemove={() => onRemoveWidget(item.i)}
+                    />
+                  ) : null}
+                </div>
+              ))}
+            </ResponsiveGridLayout>
+          </View>
+        </div>
       )}
     </Page>
   );

packages/desktop-client/src/components/settings/index.tsx

@@ -170,7 +170,6 @@ export function Settings() {
       header={t('Settings')}
       style={{
         marginInline: floatingSidebar && !isNarrowWidth ? 'auto' : 0,
-        paddingBottom: MOBILE_NAV_HEIGHT,
       }}
     >
       <View
@@ -180,6 +179,7 @@ export function Settings() {
           flexShrink: 0,
           maxWidth: 530,
           gap: 30,
+          paddingBottom: MOBILE_NAV_HEIGHT,
         }}
       >
         {isNarrowWidth && (

upcoming-release-notes/5166.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix bottom nav-bar overlaying content when scrolling down