frontend: Limit width of team photo in team info page

Author: tossy310

frontend/css/livesite.css

@@ -483,6 +483,12 @@ a.no-decoration {
   overflow-wrap: anywhere;
 }
 
+.teaminfo .team-thumbnail {
+  width: 75%;
+  height: auto;
+  margin: auto;
+}
+
 .teaminfo .team-photo {
   width: 100%;
   height: auto;
@@ -528,3 +534,15 @@ a.no-decoration {
     background-color: transparent;
   }
 }
+
+@media (max-width: 1199px) {
+  .teaminfo .team-thumbnail {
+    width: 80%;
+  }
+}
+
+@media (max-width: 991px) {
+  .teaminfo .team-thumbnail {
+    width: 100%;
+  }
+}

frontend/src/components/teams/TeamInfo.tsx

@@ -172,10 +172,12 @@ export default function TeamInfo({ requestedTeamId }: TeamInfoProps) {
         </h1>
       </div>
       {siteconfig.features.photo ? (
-        <FixedRatioThumbnail
-          url={team.photo!}
-          ratio={siteconfig.ui.photoAspectRatio}
-        />
+        <div className="team-thumbnail">
+          <FixedRatioThumbnail
+            url={team.photo!}
+            ratio={siteconfig.ui.photoAspectRatio}
+          />
+        </div>
       ) : null}
       {team.comment ? <TeamComment comment={team.comment} /> : null}
       <div className="row">{memberElements}</div>