tweak event page image sizing

web/src/components/events/EventHeader.tsx

@@ -5,8 +5,6 @@ import { Breadcrumb } from "../general/Breadcrumb";
 import { Icon } from "../general/Icon";
 
 export const EventHeader = ({ event }: { event: EventFragment }) => {
-  // TODO: where should we show image attribution for the featured image?
-
   const featuredImage: any = event.featuredImage;
 
   return (
@@ -15,8 +13,10 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
         {/*<Breadcrumb link="/arrangementer" text="Arrangement" />*/}
         {event.categories.length > 0 && (
           <div className={styles.categories}>
-            {event.categories.map(category => (
-              <div key={category.name} className="tag">{category.name}</div>
+            {event.categories.map((category) => (
+              <div key={category.name} className="tag">
+                {category.name}
+              </div>
             ))}
           </div>
         )}
@@ -37,7 +37,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
             width={featuredImage.width}
             height={featuredImage.height}
             attribution={featuredImage.attribution}
-            sizes="100vw"
+            sizes="(max-width: 1000px) 100vw, 55vw"
           />
         )}
       </div>