Add left-positioned dropdown submenu styles

Mark certain dropdowns (Gridmaster, Other Export Options, Third Party Logbooks) with a new dropdown-submenu-left class in header.php so submenus can open to the left. Update general.css to style .dropdown-submenu and .dropdown-submenu-left positioning, refine .navbar .dropdown-menu appearance, and improve dropdown item spacing, hover effects and submenu chevron styling for better alignment and visual consistency (prevents overflow and improves UX).

Author: magicbug

application/views/interface_assets/header.php

@@ -171,7 +171,7 @@
 								<div class="dropdown-divider"></div>
 								<?php } ?>
 								<?php if ($user_awards->gridmaster_dl == 1 || $user_awards->gridmaster_lx == 1 || $user_awards->gridmaster_ja == 1 || $user_awards->gridmaster_us == 1 || $user_awards->gridmaster_uk == 1) { ?>
-								<div class="nav-item dropdown dropdown-submenu" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-th"></i> Gridmaster</a>
+								<div class="nav-item dropdown dropdown-submenu dropdown-submenu-left" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-th"></i> Gridmaster</a>
 									<ul class="dropdown-menu">
 										<?php if ($user_awards->gridmaster_dl == 1) { ?>
 										<li><a class="dropdown-item" href="<?php echo site_url('awards/gridmaster/dl'); ?>"><i class="fas fa-th"></i> <?php echo lang('menu_dl_gridmaster'); ?></a></li>
@@ -381,7 +381,7 @@ function handleKeyPress(event) {
 
 								<a class="dropdown-item" href="<?php echo site_url('adif'); ?>" title="Amateur Data Interchange Format (ADIF) import / export"><i class="fas fa-sync-alt"></i> <?php echo lang('menu_adif_import_export'); ?></a>
 
-								<div class="nav-item dropdown dropdown-submenu" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-file-export"></i> Other Export Options</a>
+								<div class="nav-item dropdown dropdown-submenu dropdown-submenu-left" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-file-export"></i> Other Export Options</a>
 									<ul class="dropdown-menu">
 										<a class="dropdown-item" href="<?php echo site_url('kmlexport'); ?>" title="KML Export for Google Earth"><i class="fas fa-map"></i> <?php echo lang('menu_kml_export'); ?></a>
 
@@ -393,7 +393,7 @@ function handleKeyPress(event) {
 									</ul>
 								</div>
 
-								<div class="nav-item dropdown dropdown-submenu" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-sync"></i> Third Party Logbooks</a>
+								<div class="nav-item dropdown dropdown-submenu dropdown-submenu-left" aria-labelledby="navbarDropdown"><a class="dropdown-item dropdown-toggle" href="#"><i class="fas fa-sync"></i> Third Party Logbooks</a>
 									<ul class="dropdown-menu">
 										<a class="dropdown-item" href="<?php echo site_url('lotw'); ?>" title="Synchronise with Logbook of the World (LoTW)"><i class="fas fa-sync"></i> <?php echo lang('menu_logbook_of_the_world'); ?></a>
 

assets/css/general.css

@@ -969,12 +969,57 @@ table.dataTable tfoot td {
 }*/
 
 .dropdown-submenu {
-    position:relative;
+	position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+	top: 0;
+	left: 100%;
+	margin-top: 0;
+	margin-left: 0.125rem;
+}
+
+.dropdown-submenu-left > .dropdown-menu {
+	left: auto;
+	right: 100%;
+	margin-left: 0;
+	margin-right: 0.125rem;
+}
+
+.navbar .dropdown-menu {
+	padding: 0.35rem 0;
+	border-radius: 0.5rem;
+	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
 }
-.dropdown-submenu>.dropdown-menu {
-    top:0;
-    left:50%;
-    margin-top:30px;
+
+.navbar .dropdown-item {
+	padding: 0.45rem 1rem;
+	margin: 0.1rem 0.35rem;
+	border-radius: 0.35rem;
+	transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
+}
+
+.navbar .dropdown-item:hover,
+.navbar .dropdown-item:focus {
+	background-color: rgba(var(--bs-primary-rgb), 0.12);
+	color: var(--bs-primary);
+	transform: translateX(2px);
+}
+
+.dropdown-submenu > .dropdown-toggle {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.dropdown-submenu > .dropdown-toggle::after {
+	content: "";
+	margin-left: auto;
+	border: solid currentColor;
+	border-width: 0 0.12rem 0.12rem 0;
+	padding: 0.2rem;
+	transform: rotate(-45deg);
+	opacity: 0.65;
 }
 .dropdown-menu > li > a:hover:after {
     transform: rotate(-90deg);