Merge pull request #61 from VaagenIM/feature/front-end

Fixed some minor styling bugs, mainly for the level container when it has a lot of levels, incase that ever happens.

piggy/static/css/styles.css

@@ -306,27 +306,35 @@ h6 {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
+  border-left: 1px solid var(--piggy-neutral);
+  position: relative;
 }
 
 #level-container .snout-button {
   position: relative;
+  min-width: 85px;
+  text-align: center;
 }
 
 /* Tooltip Text */
 #level-container .nav-tooltip {
   visibility: hidden;
   width: max-content;
-  max-width: 200px;
+  max-width: 250px;
   background-color: var(--piggy-tooltip);
   color: var(--piggy-tooltip-text);
   text-align: center;
-  padding: 5px 10px 5px 10px;
+  padding: 5px 10px;
   border-radius: 6px;
   position: absolute;
   z-index: 1;
-  bottom: -40px;
+
+  /* Position the tooltip below the parent element */
+  top: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%);
+
   opacity: 0;
   transition: opacity 0.3s;
   pointer-events: none;
@@ -336,14 +344,31 @@ h6 {
 #level-container .nav-tooltip::after {
   content: "";
   position: absolute;
-  top: -10px;
+  top: -9px;
   left: 50%;
   transform: translateX(-50%);
   border-width: 5px;
   border-style: solid;
   border-color: transparent transparent var(--piggy-tooltip) transparent;
 }
 
+/* Adjust tooltip position when near the left edge */
+@media (max-width: 600px) {
+  #level-container .nav-tooltip {
+    left: 10px;
+    transform: none;
+  }
+}
+
+/* Adjust tooltip position when near the right edge */
+@media (min-width: calc(100% - 600px)) {
+  #level-container .nav-tooltip {
+    right: 10px;
+    left: auto;
+    transform: none;
+  }
+}
+
 /* Show Tooltip on Hover */
 #level-container .snout-button:hover .nav-tooltip {
   visibility: visible;
@@ -367,16 +392,17 @@ h6 {
 \****************************/
 #language-container {
   position: relative;
-  margin: 10px 25px 10px 10px; /* Optional margin */
+  margin: 10px 2px 10px 10px;
   z-index: 1000; /* Ensure it stays above other content */
+  min-width: 175px;
 }
 
 #language-container .language-dropdown {
   width: 100%;
   display: none;
   position: absolute;
   background-color: var(--piggy-menu);
-  min-width: 160px;
+  white-space: nowrap;
   box-shadow: 0px 8px 16px 0px var(--piggy-shadow-box);
   border-radius: 5px;
   top: 100%; /* Position the dropdown below the button */

piggy/templates/partials/parts/breadcrumbs.html

@@ -1,7 +1,7 @@
 <nav class="piggy-navbar flex items-center justify-between px-3 py-2">
   {# Breadcrumbs elements #}
   <ol
-    class="flex flex-wrap items-center space-x-1 md:space-x-2 flex-1 overflow-x-auto"
+    class="flex flex-wrap items-center space-x-1 md:space-x-2 flex-1 overflow-x-auto overflow-y-hidden"
   >
     {# Home element #}
     <li class="inline-flex items-center">