Small video page adjustments (#825)

- adds some `viewportMargin` to the download menu
- prevents share menu header tabs getting too large on small screens

frontend/src/routes/Video.tsx

@@ -402,7 +402,12 @@ const Metadata: React.FC<MetadataProps> = ({ id, event }) => {
  <VideoDate event={event} />
  </div>
  {/* Buttons */}
- <div css={{ display: "flex", gap: 8, flexWrap: "wrap", button: { ...shrinkOnMobile } }}>
+ <div css={{
+ display: "flex",
+ gap: 8,
+ flexWrap: "wrap",
+ "> button": { ...shrinkOnMobile },
+ }}>
  {event.canWrite && user !== "none" && user !== "unknown" && (
  <LinkButton to={`/~manage/videos/${id.slice(2)}`} css={{
  "&:not([disabled])": { color: COLORS.primary0 },
@@ -498,6 +503,7 @@ const DownloadButton: React.FC<{ event: SyncedEvent }> = ({ event }) => {
  arrowSize={12}
  ariaRole="dialog"
  trigger="click"
+ viewPortMargin={12}
  >
  <FloatingTrigger>
  <Button>