astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reduce padding on mobile / narrow screens

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

5
web/src/components/App.jsx
View file

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

2
web/src/components/Notifications.jsx
View file

@ -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")}>