From dd283dc4c2004cbeb36d17b878bb67f94d75d06a Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 30 Mar 2022 10:31:21 +0200
Subject: [PATCH] sticky sidebar

---
 resources/js/components/tournament/Detail.js | 52 ++++++++++----------
 resources/sass/tournaments.scss              |  5 ++
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index cfea60d..b6afe90 100644
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -52,32 +52,34 @@ const Detail = ({
 	</Row>
 	<Row>
 		<Col lg={{ order: 2, span: 4 }} xl={{ order: 2, span: 3 }}>
-			<div className="d-flex align-items-center justify-content-between">
-				<h2>{i18n.t('tournaments.scoreboard')}</h2>
+			<div className="tournament-sidebar">
+				<div className="d-flex align-items-center justify-content-between">
+					<h2>{i18n.t('tournaments.scoreboard')}</h2>
+				</div>
+				{hasRunners(tournament) ?
+					<Scoreboard tournament={tournament} />
+				: null}
+				{hasTournamentAdmins(tournament) ?
+					<>
+						<div className="d-flex align-items-center justify-content-between">
+							<h2>{i18n.t('tournaments.admins')}</h2>
+						</div>
+						{getTournamentAdmins(tournament).map(p =>
+							<p key={p.id}><Box user={p.user} /></p>
+						)}
+					</>
+				: null}
+				{hasTournamentMonitors(tournament) ?
+					<>
+						<div className="d-flex align-items-center justify-content-between">
+							<h2>{i18n.t('tournaments.monitors')}</h2>
+						</div>
+						{getTournamentMonitors(tournament).map(p =>
+							<p key={p.id}><Box user={p.user} /></p>
+						)}
+					</>
+				: null}
 			</div>
-			{hasRunners(tournament) ?
-				<Scoreboard tournament={tournament} />
-			: null}
-			{hasTournamentAdmins(tournament) ?
-				<>
-					<div className="d-flex align-items-center justify-content-between">
-						<h2>{i18n.t('tournaments.admins')}</h2>
-					</div>
-					{getTournamentAdmins(tournament).map(p =>
-						<p key={p.id}><Box user={p.user} /></p>
-					)}
-				</>
-			: null}
-			{hasTournamentMonitors(tournament) ?
-				<>
-					<div className="d-flex align-items-center justify-content-between">
-						<h2>{i18n.t('tournaments.monitors')}</h2>
-					</div>
-					{getTournamentMonitors(tournament).map(p =>
-						<p key={p.id}><Box user={p.user} /></p>
-					)}
-				</>
-			: null}
 		</Col>
 		<Col lg={{ order: 1, span: 8 }} xl={{ order: 1, span: 9 }}>
 			<div className="d-flex align-items-center justify-content-between">
diff --git a/resources/sass/tournaments.scss b/resources/sass/tournaments.scss
index 617125f..d142193 100644
--- a/resources/sass/tournaments.scss
+++ b/resources/sass/tournaments.scss
@@ -1,3 +1,8 @@
+.tournament-sidebar {
+	position: sticky;
+	top: 1rem;
+}
+
 .scoreboard {
 	.score {
 		&.is-self {
-- 
2.39.2