Station page improvements, responsiveness and tweaks

frontend/src/pages/Admin/index.vue

@@ -35,7 +35,7 @@
 					@click="showTab('reports')"
 				>
 					<router-link class="tab reports" to="/admin/reports">
-						<i class="material-icons">report_problem</i>
+						<i class="material-icons">flag</i>
 						<span>&nbsp;Reports</span>
 					</router-link>
 				</li>
@@ -194,6 +194,8 @@ export default {
 }
 
 .tabs {
+	padding-top: 10px;
+	margin-top: -10px;
 	background-color: $white;
 	.queueSongs {
 		color: $teal;

frontend/src/pages/Station/components/AddToPlaylistDropdown.vue

@@ -159,7 +159,6 @@ export default {
 	margin-left: 4px;
 	z-index: 1;
 	margin-bottom: 36px;
-	width: inherit;
 }
 
 #nav-dropdown-triangle {

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -20,33 +20,36 @@
 			/>
 		</figure>
 		<div id="song-info">
-			<h6>Currently playing...</h6>
-			<h4
-				id="song-title"
-				:style="!currentSong.artists ? { fontSize: '17px' } : null"
-			>
-				{{ currentSong.title }}
-			</h4>
-			<h5 id="song-artists" v-if="currentSong.artists">
-				{{ currentSong.artists }}
-			</h5>
-			<p
-				id="song-request-time"
-				v-if="
-					station.type === 'community' && station.partyMode === true
-				"
-			>
-				Requested
-				<strong>{{
-					formatDistance(
-						parseISO(currentSong.requestedAt),
-						Date.now(),
-						{
-							addSuffix: true
-						}
-					)
-				}}</strong>
-			</p>
+			<div id="song-details">
+				<h6>Currently playing...</h6>
+				<h4
+					id="song-title"
+					:style="!currentSong.artists ? { fontSize: '17px' } : null"
+				>
+					{{ currentSong.title }}
+				</h4>
+				<h5 id="song-artists" v-if="currentSong.artists">
+					{{ currentSong.artists }}
+				</h5>
+				<p
+					id="song-request-time"
+					v-if="
+						station.type === 'community' &&
+							station.partyMode === true
+					"
+				>
+					Requested
+					<strong>{{
+						formatDistance(
+							parseISO(currentSong.requestedAt),
+							Date.now(),
+							{
+								addSuffix: true
+							}
+						)
+					}}</strong>
+				</p>
+			</div>
 			<div id="song-actions">
 				<button
 					class="button"
@@ -116,17 +119,16 @@ export default {
 	width: 100%;
 	height: 100%;
 	padding: 10px;
+	min-height: 130px;
 
 	.thumbnail {
-		min-width: 120px;
-		max-height: 120px;
+		min-width: 130px;
+		max-height: 130px;
 		height: 100%;
 		position: relative;
-
-		@media screen and (max-width: 1200px) {
-			min-width: 100px;
-			max-height: 100px;
-		}
+		margin-top: -15px;
+		margin-bottom: -15px;
+		margin-left: -10px;
 
 		#yt-thumbnail-bg {
 			height: 100%;
@@ -154,8 +156,8 @@ export default {
 
 	#song-info {
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
+		flex-direction: row;
+		flex-wrap: wrap;
 		margin-left: 20px;
 		width: 100%;
 		height: 100%;
@@ -165,34 +167,42 @@ export default {
 			font-family: Karla, Arial, sans-serif;
 		}
 
-		h6 {
-			color: $musare-blue !important;
-			font-weight: bold;
-			font-size: 17px;
-		}
+		#song-details {
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			flex-grow: 1;
+			h6 {
+				color: $musare-blue !important;
+				font-weight: bold;
+				font-size: 17px;
+			}
 
-		#song-title {
-			margin-top: 7px;
-			font-size: 22px;
-		}
+			#song-title {
+				margin-top: 7px;
+				font-size: 22px;
+			}
 
-		#song-artists {
-			font-size: 16px;
-		}
+			#song-artists {
+				font-size: 16px;
+				margin-bottom: 5px;
+			}
 
-		#song-request-time {
-			font-size: 12px;
-			margin-top: 7px;
-			color: $dark-grey;
+			#song-request-time {
+				font-size: 12px;
+				margin-top: 7px;
+				color: $dark-grey;
+			}
 		}
 
 		#song-actions {
-			margin-top: 10px;
+			display: flex;
 
 			.button {
 				color: #fff;
 				padding: 0 15px;
 				border: 0;
+				margin: auto 3px;
 			}
 
 			#report-icon {

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -149,8 +149,10 @@ export default {
 	}
 	#queue-item-buttons {
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
+		flex-wrap: wrap;
 		margin-left: 10px;
+		justify-content: center;
 	}
 
 	#thumbnail {

frontend/src/pages/Station/components/Sidebar/index.vue

@@ -88,18 +88,12 @@ export default {
 <style lang="scss" scoped>
 @import "../../../../styles/global.scss";
 
-#tabs-container {
+#tabs-container .tab {
 	width: 100%;
-	top: 0;
+	height: calc(100% - 36px);
 	position: absolute;
-	max-height: calc(100% - 36px);
-	height: inherit;
-
-	.tab {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-	}
+	border: 1px solid $light-grey-2;
+	border-top: 0;
 }
 
 #tab-selection {

frontend/src/pages/Station/index.vue

@@ -15,263 +15,276 @@
 				id="station-inner-container"
 				:class="{ 'nothing-here': noSong }"
 			>
-				<div id="about-station-container" class="quadrant">
-					<div id="station-info">
-						<div class="row" id="station-name">
-							<h1>{{ station.displayName }}</h1>
-							<a href="#">
-								<!-- Favorite Station Button -->
+				<div id="station-left-column" class="column">
+					<div class="player-container quadrant" v-show="!noSong">
+						<div id="video-container">
+							<div
+								id="stationPlayer"
+								style="width: 100%; height: 100%"
+							/>
+							<div
+								class="player-cannot-autoplay"
+								v-if="!canAutoplay"
+							>
+								<p>
+									Please click anywhere on the screen for the
+									video to start
+								</p>
+							</div>
+						</div>
+						<div id="seeker-bar-container">
+							<div id="seeker-bar" style="width: 0%" />
+						</div>
+						<div id="control-bar-container">
+							<div id="left-buttons">
+								<!-- Debug Box -->
+								<button
+									class="button is-primary"
+									@click="togglePlayerDebugBox()"
+									@dblclick="resetPlayerDebugBox()"
+								>
+									<i class="material-icons icon-with-button">
+										bug_report
+									</i>
+								</button>
+
+								<!-- Local Pause/Resume Button -->
+								<button
+									class="button is-primary"
+									@click="resumeLocalStation()"
+									id="local-resume"
+									v-if="localPaused"
+								>
+									<i class="material-icons">play_arrow</i>
+								</button>
+								<button
+									class="button is-primary"
+									@click="pauseLocalStation()"
+									id="local-pause"
+									v-else
+								>
+									<i class="material-icons">pause</i>
+								</button>
+
+								<!-- Vote to Skip Button -->
+								<button
+									v-if="loggedIn"
+									class="button is-primary"
+									@click="voteSkipStation()"
+								>
+									<i class="material-icons icon-with-button"
+										>skip_next</i
+									>
+									{{ currentSong.skipVotes }}
+								</button>
+							</div>
+							<div id="duration">
+								<p>
+									{{ timeElapsed }} /
+									{{ utils.formatTime(currentSong.duration) }}
+								</p>
+							</div>
+							<p id="volume-control">
+								<i
+									v-if="muted"
+									class="material-icons"
+									@click="toggleMute()"
+									>volume_mute</i
+								>
 								<i
-									v-if="loggedIn && station.isFavorited"
-									@click.prevent="unfavoriteStation()"
+									v-else
 									class="material-icons"
-									>star</i
+									@click="toggleMute()"
+									>volume_down</i
 								>
+								<input
+									v-model="volumeSliderValue"
+									type="range"
+									min="0"
+									max="10000"
+									class="volume-slider active"
+									@change="changeVolume()"
+									@input="changeVolume()"
+								/>
 								<i
-									v-if="loggedIn && !station.isFavorited"
-									@click.prevent="favoriteStation()"
 									class="material-icons"
-									>star_border</i
+									@click="increaseVolume()"
+									>volume_up</i
 								>
-							</a>
+							</p>
+							<div id="right-buttons" v-if="loggedIn">
+								<!-- Ratings (Like/Dislike) Buttons -->
+								<div
+									id="ratings"
+									v-if="
+										currentSong.likes !== -1 &&
+											currentSong.dislikes !== -1
+									"
+									:class="{
+										liked: liked,
+										disliked: disliked
+									}"
+								>
+									<!-- Like Song Button -->
+									<button
+										class="button is-success"
+										id="like-song"
+										@click="toggleLike()"
+									>
+										<i
+											class="material-icons icon-with-button"
+											:class="{ liked: liked }"
+											>thumb_up_alt</i
+										>{{ currentSong.likes }}
+									</button>
+
+									<!-- Dislike Song Button -->
+									<button
+										class="button is-danger"
+										id="dislike-song"
+										@click="toggleDislike()"
+									>
+										<i
+											class="material-icons icon-with-button"
+											:class="{
+												disliked: disliked
+											}"
+											>thumb_down_alt</i
+										>{{ currentSong.dislikes }}
+									</button>
+								</div>
+
+								<!-- Add Song To Playlist Button & Dropdown -->
+								<div id="add-song-to-playlist">
+									<div class="control has-addons">
+										<button
+											class="button is-primary"
+											@click="
+												showPlaylistDropdown = !showPlaylistDropdown
+											"
+										>
+											<i class="material-icons">queue</i>
+										</button>
+										<button
+											class="button"
+											id="dropdown-toggle"
+											@click="
+												showPlaylistDropdown = !showPlaylistDropdown
+											"
+										>
+											<i class="material-icons">
+												{{
+													showPlaylistDropdown
+														? "expand_more"
+														: "expand_less"
+												}}
+											</i>
+										</button>
+									</div>
+									<add-to-playlist-dropdown
+										v-if="showPlaylistDropdown"
+									/>
+								</div>
+							</div>
 						</div>
-						<p>{{ station.description }}</p>
 					</div>
-
-					<div id="admin-buttons" v-if="isOwnerOrAdmin()">
-						<!-- (Admin) Pause/Resume Button -->
-						<button
-							class="button is-danger"
-							v-if="stationPaused"
-							@click="resumeStation()"
-						>
-							<i class="material-icons icon-with-button"
-								>play_arrow</i
-							>
-							<span class="optional-desktop-only-text">
-								Resume Station
-							</span>
-						</button>
-						<button
-							class="button is-danger"
-							@click="pauseStation()"
-							v-else
-						>
-							<i class="material-icons icon-with-button">pause</i>
-							<span class="optional-desktop-only-text">
-								Pause Station
-							</span>
-						</button>
-
-						<!-- (Admin) Skip Button -->
-						<button class="button is-danger" @click="skipStation()">
-							<i class="material-icons icon-with-button"
-								>skip_next</i
-							>
-							<span class="optional-desktop-only-text">
-								Force Skip
-							</span>
-						</button>
-
-						<!-- (Admin) Station Settings Button -->
-						<button
-							class="button is-primary"
-							@click="openSettings()"
+					<p class="player-container nothing-here-text" v-if="noSong">
+						No song is currently playing
+					</p>
+					<div v-if="!noSong" id="current-next-row">
+						<div
+							id="currently-playing-container"
+							class="quadrant"
+							:class="{ 'no-currently-playing': noSong }"
 						>
-							<i class="material-icons icon-with-button"
-								>settings</i
-							>
-							<span class="optional-desktop-only-text">
-								Station settings
-							</span>
-						</button>
+							<currently-playing />
+							<!-- <p v-else class="nothing-here-text">
+								No song is currently playing
+							</p> -->
+						</div>
 					</div>
 				</div>
-
-				<div class="player-container quadrant" v-show="!noSong">
-					<div id="video-container">
-						<div
-							id="stationPlayer"
-							style="width: 100%; height: 100%"
-						/>
-						<div class="player-cannot-autoplay" v-if="!canAutoplay">
-							<p>
-								Please click anywhere on the screen for the
-								video to start
-							</p>
+				<div id="station-right-column" class="column">
+					<div id="about-station-container" class="quadrant">
+						<div id="station-info">
+							<div class="row" id="station-name">
+								<h1>{{ station.displayName }}</h1>
+								<a href="#">
+									<!-- Favorite Station Button -->
+									<i
+										v-if="loggedIn && station.isFavorited"
+										@click.prevent="unfavoriteStation()"
+										class="material-icons"
+										>star</i
+									>
+									<i
+										v-if="loggedIn && !station.isFavorited"
+										@click.prevent="favoriteStation()"
+										class="material-icons"
+										>star_border</i
+									>
+								</a>
+							</div>
+							<p>{{ station.description }}</p>
 						</div>
-					</div>
-					<div id="seeker-bar-container">
-						<div id="seeker-bar" style="width: 0%" />
-					</div>
-					<div id="control-bar-container">
-						<div id="left-buttons">
-							<!-- Debug Box -->
-							<button
-								class="button is-primary"
-								@click="togglePlayerDebugBox()"
-								@dblclick="resetPlayerDebugBox()"
-							>
-								<i class="material-icons icon-with-button">
-									bug_report
-								</i>
-							</button>
 
-							<!-- Local Pause/Resume Button -->
+						<div id="admin-buttons" v-if="isOwnerOrAdmin()">
+							<!-- (Admin) Pause/Resume Button -->
 							<button
-								class="button is-primary"
-								@click="resumeLocalStation()"
-								id="local-resume"
-								v-if="localPaused"
+								class="button is-danger"
+								v-if="stationPaused"
+								@click="resumeStation()"
 							>
-								<i class="material-icons">play_arrow</i>
+								<i class="material-icons icon-with-button"
+									>play_arrow</i
+								>
+								<span class="optional-desktop-only-text">
+									Resume Station
+								</span>
 							</button>
 							<button
-								class="button is-primary"
-								@click="pauseLocalStation()"
-								id="local-pause"
+								class="button is-danger"
+								@click="pauseStation()"
 								v-else
 							>
-								<i class="material-icons">pause</i>
+								<i class="material-icons icon-with-button"
+									>pause</i
+								>
+								<span class="optional-desktop-only-text">
+									Pause Station
+								</span>
 							</button>
 
-							<!-- Vote to Skip Button -->
+							<!-- (Admin) Skip Button -->
 							<button
-								v-if="loggedIn"
-								class="button is-primary"
-								@click="voteSkipStation()"
+								class="button is-danger"
+								@click="skipStation()"
 							>
 								<i class="material-icons icon-with-button"
 									>skip_next</i
 								>
-								({{ currentSong.skipVotes }})
+								<span class="optional-desktop-only-text">
+									Force Skip
+								</span>
 							</button>
-						</div>
-						<div id="duration">
-							<p>
-								{{ timeElapsed }} /
-								{{ utils.formatTime(currentSong.duration) }}
-							</p>
-						</div>
-						<p id="volume-control">
-							<i
-								v-if="muted"
-								class="material-icons"
-								@click="toggleMute()"
-								>volume_mute</i
-							>
-							<i
-								v-else
-								class="material-icons"
-								@click="toggleMute()"
-								>volume_down</i
-							>
-							<input
-								v-model="volumeSliderValue"
-								type="range"
-								min="0"
-								max="10000"
-								class="volume-slider active"
-								@change="changeVolume()"
-								@input="changeVolume()"
-							/>
-							<i class="material-icons" @click="increaseVolume()"
-								>volume_up</i
-							>
-						</p>
-						<div id="right-buttons" v-if="loggedIn">
-							<!-- Ratings (Like/Dislike) Buttons -->
-							<div
-								id="ratings"
-								v-if="
-									currentSong.likes !== -1 &&
-										currentSong.dislikes !== -1
-								"
-								:class="{
-									liked: liked,
-									disliked: disliked
-								}"
-							>
-								<!-- Like Song Button -->
-								<button
-									class="button is-success"
-									id="like-song"
-									@click="toggleLike()"
-								>
-									<i
-										class="material-icons icon-with-button"
-										:class="{ liked: liked }"
-										>thumb_up_alt</i
-									>{{ currentSong.likes }}
-								</button>
 
-								<!-- Dislike Song Button -->
-								<button
-									class="button is-danger"
-									id="dislike-song"
-									@click="toggleDislike()"
+							<!-- (Admin) Station Settings Button -->
+							<button
+								class="button is-primary"
+								@click="openSettings()"
+							>
+								<i class="material-icons icon-with-button"
+									>settings</i
 								>
-									<i
-										class="material-icons icon-with-button"
-										:class="{
-											disliked: disliked
-										}"
-										>thumb_down_alt</i
-									>{{ currentSong.dislikes }}
-								</button>
-							</div>
-
-							<!-- Add Song To Playlist Button & Dropdown -->
-							<div id="add-song-to-playlist">
-								<div class="control has-addons">
-									<button
-										class="button is-primary"
-										@click="
-											showPlaylistDropdown = !showPlaylistDropdown
-										"
-									>
-										<i class="material-icons">queue</i>
-									</button>
-									<button
-										class="button"
-										id="dropdown-toggle"
-										@click="
-											showPlaylistDropdown = !showPlaylistDropdown
-										"
-									>
-										<i class="material-icons">
-											{{
-												showPlaylistDropdown
-													? "expand_more"
-													: "expand_less"
-											}}
-										</i>
-									</button>
-								</div>
-								<add-to-playlist-dropdown
-									v-if="showPlaylistDropdown"
-								/>
-							</div>
+								<span class="optional-desktop-only-text">
+									Station settings
+								</span>
+							</button>
 						</div>
 					</div>
-				</div>
-				<p class="player-container nothing-here-text" v-if="noSong">
-					No song is currently playing
-				</p>
-
-				<div id="sidebar-container" class="quadrant">
-					<station-sidebar />
-				</div>
-
-				<div
-					id="currently-playing-container"
-					class="quadrant"
-					:class="{ 'no-currently-playing': noSong }"
-				>
-					<currently-playing v-if="!noSong" />
-					<p v-else class="nothing-here-text">
-						No song is currently playing
-					</p>
+					<div id="sidebar-container" class="quadrant">
+						<station-sidebar />
+					</div>
 				</div>
 			</div>
 
@@ -1531,83 +1544,16 @@ export default {
 	padding: 20px 40px;
 	height: 100%;
 	width: 100%;
-	max-width: 2000px;
-
-	@media (max-width: 1040px) {
-		padding: 0;
-		margin-top: 0 !important;
-		height: auto !important;
-
-		#station-inner-container.nothing-here {
-			grid-template-areas:
-				"about-station"
-				"player"
-				"sidebar" !important;
-			grid-template-rows: min-content 50px auto !important;
-		}
-
-		#station-inner-container {
-			grid-template-columns: 100% !important;
-			grid-template-areas:
-				"about-station"
-				"player"
-				"currently-playing"
-				"sidebar" !important;
-			grid-template-rows: auto !important;
-		}
-
-		.quadrant,
-		.player-container {
-			border: 0 !important;
-			background: transparent !important;
-		}
-
-		.player-container {
-			padding: 0 10px;
-		}
-
-		/** padding fixes on mobile */
-		#about-station-container {
-			margin-top: 30px;
-			padding: 0 10px !important;
-		}
-
-		#currently-playing-container {
-			padding: 0 10px !important;
-
-			#currently-playing {
-				padding: 0;
-			}
-		}
-
-		#sidebar-container {
-			padding: 0 10px !important;
-			max-height: 500px !important;
-			min-height: 250px;
-		}
-
-		/** Change height of YouTube embed  */
-		.player-container:not(.nothing-here-text) {
-			height: 500px !important;
-		}
-
-		/** mainly irrelevant on mobile */
-		.no-currently-playing {
-			display: none !important;
-		}
-	}
+	max-width: 1800px;
+	display: flex;
 
 	#station-inner-container {
-		display: grid;
 		height: 100%;
 		width: 100%;
-		grid-template-columns: 65% 35%;
-		grid-template-rows: 150px auto;
-		grid-template-areas:
-			"about-station currently-playing"
-			"player sidebar";
-		gap: 25px;
 		min-height: calc(100vh - 64px - 190px);
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
 
 		.row {
 			display: flex;
@@ -1622,6 +1568,8 @@ export default {
 
 		.quadrant {
 			border-radius: 5px;
+			margin: 10px;
+			flex-grow: 1;
 		}
 
 		.quadrant:not(#sidebar-container) {
@@ -1629,17 +1577,21 @@ export default {
 			border: 1px solid $light-grey-2;
 		}
 
+		#station-left-column {
+			padding: 0;
+		}
+		#station-right-column {
+			max-width: 650px;
+			padding: 0;
+		}
+
 		#about-station-container {
-			align-items: flex-start;
 			padding: 20px;
-			grid-area: about-station;
 			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
+			flex-direction: column;
+			flex-grow: unset;
 
 			#station-info {
-				flex-grow: 1;
-
 				#station-name {
 					flex-direction: row !important;
 
@@ -1658,23 +1610,29 @@ export default {
 
 				p {
 					max-width: 700px;
-					flex-grow: 1;
+					margin-bottom: 10px;
 				}
 			}
 
-			@media (max-width: 450px) {
-				#admin-buttons .optional-desktop-only-text {
-					display: none;
+			#admin-buttons {
+				display: flex;
+				.button {
+					margin: 3px;
 				}
 			}
 		}
 
-		#currently-playing-container {
-			grid-area: currently-playing;
-			margin-right: 25px;
+		#current-next-row {
+			display: flex;
+			flex-direction: row;
 
-			.nothing-here-text {
-				height: 100%;
+			#currently-playing-container,
+			#next-up-container {
+				overflow: hidden;
+				flex-basis: 50%;
+				.nothing-here-text {
+					height: 100%;
+				}
 			}
 		}
 
@@ -1686,7 +1644,7 @@ export default {
 			border: 1px solid $light-grey-2;
 			border-radius: 5px;
 			overflow: hidden;
-			grid-area: player;
+			flex-grow: 1;
 
 			&.nothing-here-text {
 				border: 1px solid $light-grey-2;
@@ -1766,7 +1724,7 @@ export default {
 					p {
 						font-size: 22px;
 						/** prevents duration width slightly varying and shifting other controls slightly */
-						width: 125px;
+						width: 150px;
 						text-align: center;
 					}
 				}
@@ -1774,19 +1732,15 @@ export default {
 				#volume-control {
 					margin: 3px;
 					margin-top: 0;
-					position: relative;
 					display: flex;
 					align-items: center;
 					cursor: pointer;
 
 					.volume-slider {
-						width: 400px;
+						width: 100%;
 						padding: 0 15px;
 						background: transparent;
-
-						@media (max-width: 2150px) {
-							width: 250px !important;
-						}
+						min-width: 100px;
 					}
 
 					input[type="range"] {
@@ -1891,7 +1845,6 @@ export default {
 
 					#ratings {
 						display: flex;
-						margin-right: 5px;
 
 						#like-song:hover,
 						#like-song.liked {
@@ -1915,8 +1868,6 @@ export default {
 					#add-song-to-playlist {
 						display: flex;
 						flex-direction: column-reverse;
-						align-items: center;
-						width: 212px;
 
 						.control {
 							width: fit-content;
@@ -1931,8 +1882,6 @@ export default {
 			border-top: 0;
 			position: relative;
 			height: inherit;
-			grid-area: sidebar;
-			margin-right: 25px;
 		}
 	}
 }
@@ -1946,4 +1895,59 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
+
+@media (max-width: 1300px) {
+	#station-outer-container {
+		padding: 10px;
+		height: unset;
+		max-width: 700px;
+		#station-inner-container {
+			flex-direction: column;
+			#station-left-column {
+				#current-next-row {
+					flex-direction: column;
+				}
+				#video-container {
+					min-height: 200px;
+				}
+				#control-bar-container {
+					#duration,
+					#volume-control,
+					#right-buttons,
+					#left-buttons {
+						margin-bottom: 5px;
+						justify-content: center;
+					}
+					#duration {
+						order: 1;
+					}
+					#volume-control {
+						order: 2;
+						max-width: 400px;
+					}
+					#right-buttons {
+						order: 3;
+						flex-wrap: wrap;
+						#ratings {
+							flex-wrap: wrap;
+						}
+					}
+					#left-buttons {
+						order: 4;
+						flex-wrap: wrap;
+					}
+				}
+			}
+			#station-right-column {
+				max-width: unset;
+				#about-station-container #admin-buttons {
+					flex-wrap: wrap;
+				}
+				#sidebar-container {
+					min-height: 350px;
+				}
+			}
+		}
+	}
+}
 </style>