Make legends responsive

Author: athuler

cytoscape-styles.css

@@ -161,7 +161,7 @@ html, body {
 	border-radius: 2px;
 }
 
-/* Hide "Click any node to explore" text on smaller screens */
+
 @media (max-width: 600px) {
 	.hide-on-small {
 		display: none;
@@ -178,6 +178,16 @@ html, body {
 	#header .footer {
 		font-size: 0.9em;
 	}
+
+	/* Hide button text, keep icons only */
+	.btn-text {
+		display: none;
+	}
+
+	/* Center buttons and legend when they wrap */
+	#controls {
+		justify-content: center;
+	}
 }
 
 #header a {

index.php

@@ -106,16 +106,16 @@ function gtag(){dataLayer.push(arguments);}
 	<div id="controls">
 		<div class="btn-group">
 			<button class="control-btn" onclick="centerOnStart(window.firstVideoId, window.cy)">
-				<i class="bi bi-house"></i> Go to Start
+				<i class="bi bi-house"></i><span class="btn-text"> Go to Start</span>
 			</button>
 			<button class="control-btn" onclick="changeLayout('breadthfirst', window.cy, window.firstVideoId)">
-				<i class="bi bi-diagram-2"></i> Tree Layout
+				<i class="bi bi-diagram-2"></i><span class="btn-text"> Tree Layout</span>
 			</button>
 			<button class="control-btn" onclick="changeLayout('cose', window.cy, window.firstVideoId)">
-				<i class="bi bi-node-plus"></i> Bubble Layout
+				<i class="bi bi-node-plus"></i><span class="btn-text"> Bubble Layout</span>
 			</button>
 			<a href="download.php"><button class="control-btn">
-				<i class="bi bi-download"></i> Download</button>
+				<i class="bi bi-download"></i><span class="btn-text"> Download</span></button>
 			</a>
 			<!-- <button class="control-btn" onclick="changeLayout('circle', window.cy, window.firstVideoId)">Circle Layout</button> -->
 			<!-- <button class="control-btn" onclick="resetView(window.cy, window.firstVideoId)"><i class="bi bi-arrows-angle-contract"></i> Reset View</button> -->