added xs tailwind breakpoint

This commit is contained in:
Bernt Christian Egeland 2021-08-28 08:34:17 +02:00
parent a7684f3909
commit d92c945c10
2 changed files with 5 additions and 4 deletions

View File

@ -57,8 +57,8 @@ export default function Event({ eventId, close, scrollRef }) {
return ( return (
<div className="space-y-4" ref={eventRef}> <div className="space-y-4" ref={eventRef}>
<div className="grid grid-cols-6 gap-4"> <div className="flex md:flex-row justify-between flex-wrap flex-col">
<div class="col-start-1 col-end-8 md:space-x-4"> <div class="space-x-4">
<Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download> <Button color="blue" href={`${apiHost}/api/events/${eventId}/clip.mp4?download=true`} download>
<Clip className="w-6" /> Download Clip <Clip className="w-6" /> Download Clip
</Button> </Button>
@ -66,7 +66,7 @@ export default function Event({ eventId, close, scrollRef }) {
<Snapshot className="w-6" /> Download Snapshot <Snapshot className="w-6" /> Download Snapshot
</Button> </Button>
</div> </div>
<div class="col-end-10 col-span-2 space-x-4"> <div class="space-x-4">
<Button className="self-start" color="red" onClick={handleClickDelete}> <Button className="self-start" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event <Delete className="w-6" /> Delete event
</Button> </Button>
@ -92,7 +92,7 @@ export default function Event({ eventId, close, scrollRef }) {
/> />
) : null} ) : null}
</div> </div>
<div className="outer-max-width m-auto"> <div className="outer-max-width xs:m-auto">
<div className="w-full pt-5 relative pb-20"> <div className="w-full pt-5 relative pb-20">
{data.has_clip ? ( {data.has_clip ? (
<Fragment> <Fragment>

View File

@ -4,6 +4,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
screens: { screens: {
xs: '480px',
'2xl': '1536px', '2xl': '1536px',
'3xl': '1720px', '3xl': '1720px',
}, },