From 55eed868faf2e8092d864c6dd777ada4feae2e4d Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Thu, 29 Jun 2023 13:02:17 +0200 Subject: [PATCH] Reduce padding on mobile / narrow screens --- web/src/components/App.jsx | 5 ++--- web/src/components/Notifications.jsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx index 2951a2bc..2ad7f419 100644 --- a/web/src/components/App.jsx +++ b/web/src/components/App.jsx @@ -1,7 +1,6 @@ import * as React from "react"; import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react"; -import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery } from "@mui/material"; -import { ThemeProvider, createTheme } from "@mui/material/styles"; +import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery, ThemeProvider, createTheme } from "@mui/material"; import { useLiveQuery } from "dexie-react-hooks"; import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom"; import { AllSubscriptions, SingleSubscription } from "./Notifications"; @@ -133,7 +132,7 @@ const Main = (props) => ( display: "flex", flexGrow: 1, flexDirection: "column", - padding: 3, + padding: { xs: 0, md: 3 }, width: { sm: `calc(100% - ${Navigation.width}px)` }, height: "100dvh", overflow: "auto", diff --git a/web/src/components/Notifications.jsx b/web/src/components/Notifications.jsx index fe9fcc48..85ced743 100644 --- a/web/src/components/Notifications.jsx +++ b/web/src/components/Notifications.jsx @@ -184,7 +184,7 @@ const NotificationItem = (props) => { const hasUserActions = notification.actions && notification.actions.length > 0; const showActions = hasAttachmentActions || hasClickAction || hasUserActions; return ( - +