The Last Push for Mobile Fixes (Maybe)

rocky-interface/src/lib/components/Topbar.svelte

@@ -12,11 +12,9 @@
 <header class="topbar">
 		<button class="hamburger" aria-label="Toggle menu" onclick={() => sidebarOpen.update(open => !open)}>
 			{#if isHamburgerDay}
-				<img src="/hamburger.svg" alt="Menu" class="hamburger-icon" />
+				<img src="/hamburger.svg" alt="Menu" class="hamburger-icon"/>
 			{:else}
-				<span class="hamburger-line"></span>
-				<span class="hamburger-line"></span>
-				<span class="hamburger-line"></span>
+				<img src="/navbar.svg" alt="Menu"/>
 			{/if}
 		</button>
 

rocky-interface/src/lib/styles/components/components.css

@@ -4,7 +4,8 @@
 
 /* ========== TOPBAR ========== */
 .topbar {
-	height: var(--size-topbar-height);
+	position: relative;
+	height: 80px;
 	background: var(--color-bg-topbar);
 	display: flex;
 	align-items: center;
@@ -13,6 +14,8 @@
 	box-shadow: var(--shadow-topbar);
 	flex-shrink: 0;
 	border-bottom: 3px solid var(--color-highlight-gold);
+	padding-top: 3px;
+	box-sizing: content-box;
 }
 
 .brand-logo {
@@ -39,9 +42,21 @@
 }
 
 .ksu-logo {
-	height: 40px;
-	width: auto;
-	margin-left: auto;
+    height: 40px;
+    width: auto;
+    position: absolute;
+    left: 83%;
+    transform: translateX(-0%);
+}
+
+@media (max-width: 768px) {
+    .ksu-logo {
+        height: 28px;
+        position: static;
+        transform: none;
+        margin-left: auto;
+        margin-right: var(--space-sm);
+    }
 }
 
 /* Hamburger menu styles, doesn't show on desktop */
@@ -90,10 +105,10 @@
 	background: transparent;
 	text-align: left;
 	color: var(--color-text-inverse);
-	padding: 14px var(--space-lg);
+	padding: 16px var(--space-lg);
 	width: 100%;
 	cursor: pointer;
-	font-size: var(--font-size-base);
+	font-size: var(--font-size-lg);
 	font-weight: var(--font-weight-semibold);
 	transition: background-color var(--transition-base);
 	border-left: 4px solid transparent;
@@ -108,31 +123,40 @@
 	border-left-color: var(--color-highlight-gold);
 }
 
+.nav-link-icon {
+    width: 22px;
+    height: 22px;
+}
+
 .spacer {
-	flex: 1;
+	flex: 0;
 }
 
 @media (max-width: 768px) {
 	.spacer {
 		flex: 0;
 	}
 }
+
 /* Overlay for mobile sidebar */
 @media (max-width: 768px) {
 	.sidebar {
 		position: fixed;
-		top: var(--size-topbar-height);
+		top: 80px;
 		left: 0;
-		height: calc(100% - var(--size-topbar-height));
+		height: calc(100% - 80px);
 		transform: translateX(-100%);
 		transition: transform 0.25s ease;
 		z-index: 200;
+		overflow-y: auto;
+		justify-content: flex-start;
 	}
 
 	.sidebar.open {
 		transform: translateX(0);
 	}
 }
+
 .sidebar-backdrop {
 	display: none;
 }
@@ -141,7 +165,7 @@
 	.sidebar-backdrop {
 		display: block;
 		position: fixed;
-		inset: var(--size-topbar-height) 0 0 0;
+		inset: 80px 0 0 0;
 		background: rgba(0, 0, 0, 0.4);
 		z-index: 199;
 	}
@@ -256,11 +280,14 @@
 /*  Mobile View for Courses Sidebar */
 @media (max-width: 768px) {
 	.course-popout {
-		position: static;
+		position: static !important;
+		left: auto;
+		top: auto;
+		bottom: auto;
 		width: 100%;
 		height: auto;
 		max-height: 400px;
-		border-radius: 0;
+		border-radius: 0px;
 		border-left: none;
 		border-right: none;
 		box-shadow: none;
@@ -272,7 +299,20 @@
 
 @media (max-width: 768px) {
     .course-popout-header {
-        display: none;
+        display: none ! important;
+    }
+}
+
+@media (max-width: 768px) {
+	.course-tab-group {
+		position: static;
+	}
+}
+
+@media (max-width: 768px) {
+    .sidebar .course-popout {
+        max-width: var(--size-sidebar-width);
+        overflow-x: hidden;
     }
 }
 
@@ -471,6 +511,43 @@
 	text-decoration: underline;
 }
 
+/* ========== COURSE COMPOSER ========== */
+.course-composer-layer {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-lg);
+}
+
+.course-composer-popout {
+    background: var(--color-bg-primary);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-xl);
+    width: 100%;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.course-composer-title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--space-lg);
+}
+
+.course-composer-title-row h3 {
+    margin: 0;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+}
+
 /* ========== LIST VIEW ========== */
 .list-row {
 	display: flex;

rocky-interface/src/lib/styles/components/modules/sidebar.css

@@ -19,15 +19,22 @@
 	gap: var(--space-sm);
 	text-align: left;
 	color: var(--color-text-inverse);
-	padding: 14px var(--space-lg);
+	padding: 20px var(--space-lg);
 	width: 100%;
 	cursor: pointer;
-	font-size: var(--font-size-base);
+	font-size: var(--font-size-lg);
 	font-weight: var(--font-weight-semibold);
 	transition: background-color var(--transition-base);
 	border-left: 4px solid transparent;
 }
 
+@media (max-width: 768px) {
+    .nav-link {
+        padding: 16px var(--space-lg);
+        font-size: var(--font-size-base);
+    }
+}
+
 .nav-link-icon {
 	width: 18px;
 	height: 18px;

rocky-interface/src/lib/styles/foundation/tokens.css

@@ -90,7 +90,7 @@
 	--transition-slow: 0.2s;
 
 	/* --------- SIZES --------- */
-	--size-topbar-height: 60px;
+	--size-topbar-height: 80px;
 	--size-sidebar-width: 240px;
 	--size-widget-panel-width: 300px;
 

rocky-interface/src/lib/styles/layout/modules/view-structure.css

@@ -68,3 +68,24 @@
 	background: var(--color-gray-300);
 	border-radius: 3px;
 }
+
+@media (max-width: 768px) {
+    .view-header {
+        flex-wrap: wrap;
+        gap: var(--space-md);
+    }
+
+    .view-title h1 {
+        font-size: var(--font-size-xl);
+    }
+
+    .view-actions {
+        flex-shrink: 1;
+        gap: var(--space-sm);
+    }
+
+    .view-btn {
+        padding: 6px var(--space-md);
+        font-size: var(--font-size-xs);
+    }
+}

rocky-interface/src/lib/styles/routes/modules/users-view.css

@@ -17,6 +17,8 @@
 	font-weight: var(--font-weight-semibold);
 }
 
+
+
 .whitelist-heading {
 	margin: 0 0 12px 0;
 }
@@ -69,7 +71,7 @@
 }
 
 .users-col-id {
-	width: 20%;
+	width: 30%;
 }
 
 .users-col-admin {
@@ -104,3 +106,29 @@
 		grid-template-columns: 1fr;
 	}
 }
+
+@media (max-width: 768px) {
+    .table-container {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .users-table {
+        min-width: 740px;
+        table-layout: fixed;
+    }
+
+    .users-col-name    { width: 130px; }
+    .users-col-email   { width: 200px; }
+    .users-col-id      { width: 210px; }
+    .users-col-admin   { width: 60px; }
+    .users-col-active  { width: 60px; }
+    .users-col-actions { width: 110px; }
+
+    .users-table td,
+    .users-table th {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}