diff --git a/app/features/tournament-bracket/components/ScoreReporter.tsx b/app/features/tournament-bracket/components/ScoreReporter.tsx
index bf31fda30..08294dfb6 100644
--- a/app/features/tournament-bracket/components/ScoreReporter.tsx
+++ b/app/features/tournament-bracket/components/ScoreReporter.tsx
@@ -242,8 +242,14 @@ function FancyStageBanner({
alt=""
width={24}
/>
- {t(`game-misc:MODE_LONG_${stage.mode}`)} on{" "}
- {t(`game-misc:STAGE_${stage.stageId}`)}
+
+ {t(`game-misc:MODE_SHORT_${stage.mode}`)}{" "}
+ {t(`game-misc:STAGE_${stage.stageId}`)}
+
+
+ {t(`game-misc:MODE_LONG_${stage.mode}`)} on{" "}
+ {t(`game-misc:STAGE_${stage.stageId}`)}
+
{pickInfoText()}
diff --git a/app/features/tournament-bracket/tournament-bracket.css b/app/features/tournament-bracket/tournament-bracket.css
index 7cf7cd56d..58bf07299 100644
--- a/app/features/tournament-bracket/tournament-bracket.css
+++ b/app/features/tournament-bracket/tournament-bracket.css
@@ -55,10 +55,11 @@
/* TODO: add fallback from Firefox */
backdrop-filter: blur(5px);
- background: rgb(0 0 0 / 25%);
+ background: rgb(0 0 0 / 40%);
border-start-end-radius: var(--rounded);
border-start-start-radius: var(--rounded);
color: var(--badge-text);
+ font-size: var(--fonts-xs);
}
.tournament-bracket__stage-banner__bottom-bar {
@@ -83,6 +84,24 @@
gap: var(--s-2);
}
+.tournament-bracket__stage-banner__top-bar__map-text-big {
+ display: none;
+}
+
+@media screen and (min-width: 480px) {
+ .tournament-bracket__stage-banner__top-bar {
+ font-size: initial;
+ }
+
+ .tournament-bracket__stage-banner__top-bar__map-text-small {
+ display: none;
+ }
+
+ .tournament-bracket__stage-banner__top-bar__map-text-big {
+ display: initial;
+ }
+}
+
.tournament-bracket__during-match-actions {
display: grid;
grid-template-areas: