fix(grfn/bbbg): Add margins to flash messages on mobile

Change-Id: I5e33ba65ef4b6c55485fa4fb895bd6e7b3f24f1f
Reviewed-on: https://cl.tvl.fyi/c/depot/+/4668
Reviewed-by: grfn <grfn@gws.fyi>
Autosubmit: grfn <grfn@gws.fyi>
Tested-by: BuildkiteCI

users/grfn/bbbg/src/bbbg/handlers/events.clj

@@ -100,6 +100,8 @@
   ([] (event-form {}))
   ([event]
    [:div.page
+    [:div.page-header
+     [:h1 "Create New Event"]]
     [:form {:method "POST"
             :action "/events"
             :enctype "multipart/form-data"}

users/grfn/bbbg/src/bbbg/styles.clj

@@ -210,8 +210,15 @@
 
 (defstyles flash
   [:.flash-messages
-   {:width "800px"
-    :margin "1rem auto"}]
+   {:max-width "800px"
+    :margin "1rem auto"}
+
+   (at-media
+    {:screen true
+     :max-width "800px"}
+    [:&
+     {:margin-left "1rem"
+      :margin-right "1rem"}])]
 
   [:.flash-message
    {:padding "1rem 1.5rem"