Reduce padding on mobile / narrow screens

This commit is contained in:
nimbleghost 2023-06-29 13:02:17 +02:00
parent abb1baeecd
commit 55eed868fa
2 changed files with 3 additions and 4 deletions

View file

@ -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",

View file

@ -184,7 +184,7 @@ const NotificationItem = (props) => {
const hasUserActions = notification.actions && notification.actions.length > 0;
const showActions = hasAttachmentActions || hasClickAction || hasUserActions;
return (
<Card sx={{ minWidth: 275, padding: 1 }} role="listitem" aria-label={t("notifications_list_item")}>
<Card sx={{ padding: 1 }} role="listitem" aria-label={t("notifications_list_item")}>
<CardContent>
<Tooltip title={t("notifications_delete")} enterDelay={500}>
<IconButton onClick={handleDelete} sx={{ float: "right", marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>