mirror of
https://github.com/binwiederhier/ntfy.git
synced 2024-12-23 02:02:33 +01:00
Reduce padding on mobile / narrow screens
This commit is contained in:
parent
abb1baeecd
commit
55eed868fa
2 changed files with 3 additions and 4 deletions
|
@ -1,7 +1,6 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react";
|
import { createContext, Suspense, useContext, useEffect, useState, useMemo } from "react";
|
||||||
import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery } from "@mui/material";
|
import { Box, Toolbar, CssBaseline, Backdrop, CircularProgress, useMediaQuery, ThemeProvider, createTheme } from "@mui/material";
|
||||||
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
||||||
import { useLiveQuery } from "dexie-react-hooks";
|
import { useLiveQuery } from "dexie-react-hooks";
|
||||||
import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
|
import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom";
|
||||||
import { AllSubscriptions, SingleSubscription } from "./Notifications";
|
import { AllSubscriptions, SingleSubscription } from "./Notifications";
|
||||||
|
@ -133,7 +132,7 @@ const Main = (props) => (
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
padding: 3,
|
padding: { xs: 0, md: 3 },
|
||||||
width: { sm: `calc(100% - ${Navigation.width}px)` },
|
width: { sm: `calc(100% - ${Navigation.width}px)` },
|
||||||
height: "100dvh",
|
height: "100dvh",
|
||||||
overflow: "auto",
|
overflow: "auto",
|
||||||
|
|
|
@ -184,7 +184,7 @@ const NotificationItem = (props) => {
|
||||||
const hasUserActions = notification.actions && notification.actions.length > 0;
|
const hasUserActions = notification.actions && notification.actions.length > 0;
|
||||||
const showActions = hasAttachmentActions || hasClickAction || hasUserActions;
|
const showActions = hasAttachmentActions || hasClickAction || hasUserActions;
|
||||||
return (
|
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>
|
<CardContent>
|
||||||
<Tooltip title={t("notifications_delete")} enterDelay={500}>
|
<Tooltip title={t("notifications_delete")} enterDelay={500}>
|
||||||
<IconButton onClick={handleDelete} sx={{ float: "right", marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
|
<IconButton onClick={handleDelete} sx={{ float: "right", marginRight: -1, marginTop: -1 }} aria-label={t("notifications_delete")}>
|
||||||
|
|
Loading…
Reference in a new issue