fix Get Tickets overflowing in navbar

Author: anistark

src/_includes/navbar.njk

@@ -5,7 +5,7 @@
       <a href="{{ env.baseUrl }}" class="absolute left-0">
         <img src="{{ env.baseUrl }}img/logo.png" alt="PyCon India 2025" class="h-10 w-auto">
       </a>
-     <ul class="flex items-center justify-center w-full gap-8 relative mb-0">
+     <ul class="flex items-center justify-center w-full gap-1 lg:gap-4 relative mb-0">
         {% set menuItems = [
           {
             "name": "Attend",
@@ -69,7 +69,7 @@
           <li class="relative">
             {% if item.hasSubmenu %}
               <label for="desktop-menu-radio-{{ loop.index }}"
-                     class="flex items-center gap-1 py-2 px-3 text-white hover:text-[#D7FF7B] text-base font-normal font-['Acid_Grotesk'] leading-tight transition-colors duration-200 cursor-pointer nav-link">
+                     class="flex items-center gap-1 py-2 px-2 text-white hover:text-[#D7FF7B] text-base font-normal font-['Acid_Grotesk'] leading-tight transition-colors duration-200 cursor-pointer nav-link">
                 {{ item.name }}
                 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" class="ml-1 fill-current text-gray-400 transition-transform duration-200">
                   <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
@@ -97,7 +97,7 @@
             {% else %}
               <a href="{% if item.isExternal %}{{ item.link }}{% elif item.link and item.link[0] == '#' %}{{ item.link }}{% else %}{{ env.baseUrl }}{{ item.link }}{% endif %}"
                  {% if item.isExternal %}target="_blank" rel="noopener noreferrer"{% endif %}
-                 class="flex items-center gap-1 py-2 px-3 text-white hover:text-[#D7FF7B] text-base font-normal font-['Acid_Grotesk'] leading-tight transition-colors duration-200 no-underline nav-link">
+                 class="flex items-center gap-1 py-2 px-2 text-white hover:text-[#D7FF7B] text-base font-normal font-['Acid_Grotesk'] leading-tight transition-colors duration-200 no-underline nav-link">
                 {{ item.name }}
               </a>
             {% endif %}
@@ -106,7 +106,7 @@
       </ul>
       <div class="absolute right-0">
         <a href="{{ env.baseUrl }}tickets" class="font-medium text-black bg-pycon-lime/90 hover:bg-pycon-lime text-sm py-2 px-4 rounded-full transition-all duration-200 no-underline nav-button">
-          Get Tickets
+          <span class="hidden lg:inline">Get Tickets</span><span class="inline-flex items-center gap-1 lg:hidden">Get<svg fill="#4e61f5" height="14" width="14" viewBox="0 0 14.85 14.85" xmlns="http://www.w3.org/2000/svg" class="inline-block"><path d="M14.522 8.884a1.17 1.17 0 0 1 -0.653 -0.621 1.17 1.17 0 0 1 -0.023 -0.901c0.043 -0.112 0.045 -0.235 0.007 -0.348                        -0.288 0.127 -0.489 0.415 -0.489 0.749 0 0.48 -0.39 0.87 -0.87 0.87h-2.767a0.5 0.5 0 0 1 -0.027 0.096c-0.078 0.204 -0.272                        0.329 -0.478 0.329 -0.061 0 -0.123 -0.011 -0.184 -0.034 -0.174 -0.067 -0.29 -0.219 -0.32 -0.39H2.357c-0.48 0 -0.87 -0.39                        -0.87 -0.87 0 -0.452 -0.367 -0.819 -0.819 -0.819a0.865 0.865 0 0 1 -0.392 -0.094L0.034 7.48c-0.102 0.264 0.03 0.56 0.294                        0.662 0.606 0.233 0.909 0.916 0.676 1.522 -0.101 0.264 0.03 0.56 0.294 0.662l9.46 3.638c0.06 0.023 0.123 0.034 0.184                        0.034 0.206 0 0.4 -0.125 0.478 -0.328 0.174 -0.452 0.616 -0.755 1.099 -0.755 0.144 0 0.286 0.027 0.422 0.079a0.512 0.512                        0 0 0 0.662 -0.294l1.213 -3.153c0.102 -0.264 -0.03 -0.56 -0.294 -0.662zm-5.814 2.425a0.513 0.513 0 0 1 -0.478 0.329 0.52                        0.52 0 0 1 -0.184 -0.034c-0.264 -0.101 -0.395 -0.398 -0.294 -0.661 0.101 -0.264 0.398 -0.396 0.661 -0.294 0.264 0.102                        0.396 0.398 0.294 0.661zm0.496 -1.29a0.512 0.512 0 0 1 -0.478 0.329c-0.061 0 -0.123 -0.011 -0.184 -0.034 -0.264 -0.101                        -0.396 -0.398 -0.294 -0.661 0.101 -0.264 0.397 -0.396 0.661 -0.294 0.264 0.101 0.395 0.398 0.294 0.661zm2.641 0.193a0.512                        0.512 0 0 1 -0.478 0.328c-0.061 0 -0.123 -0.011 -0.184 -0.034l-0.788 -0.303c-0.264 -0.102 -0.396 -0.398 -0.294 -0.662                        0.102 -0.264 0.398 -0.395 0.662 -0.294l0.788 0.303c0.264 0.101 0.396 0.398 0.294 0.662z"/><path d="M0.668 6.228c0.847 0 1.536 0.689 1.536 1.536a0.154 0.154 0 0 0 0.154 0.154h10.135a0.154 0.154 0 0 0 0.154 -0.154c0                      -0.847 0.689 -1.536 1.536 -1.536a0.154 0.154 0 0 0 0.154 -0.154v-3.378a0.154 0.154 0 0 0 -0.154 -0.154c-0.847 0 -1.536                      -0.689 -1.536 -1.536a0.154 0.154 0 0 0 -0.154 -0.154H2.357a0.154 0.154 0 0 0 -0.154 0.154c0 0.847 -0.689 1.536 -1.536                      1.536a0.154 0.154 0 0 0 -0.154 0.154v3.378a0.153 0.153 0 0 0 0.153 0.154zM10.803 3.873h0.845c0.283 0 0.512 0.229 0.512                      0.512s-0.229 0.512 -0.512 0.512H10.803c-0.283 0 -0.512 -0.229 -0.512 -0.512s0.229 -0.512 0.512 -0.512zm-1.689                      -2.724c0.283 0 0.512 0.229 0.512 0.512s-0.229 0.512 -0.512 0.512c-0.283 0 -0.512 -0.229 -0.512 -0.512 0 -0.283 0.229                      -0.512 0.512 -0.512zm0 1.382c0.283 0 0.512 0.229 0.512 0.512s-0.229 0.512 -0.512 0.512c-0.283 0 -0.512 -0.229 -0.512                      -0.512 0 -0.283 0.229 -0.512 0.512 -0.512zm0 1.382c0.283 0 0.512 0.229 0.512 0.512s-0.229 0.512 -0.512 0.512c-0.283 0                      -0.512 -0.229 -0.512 -0.512 0 -0.283 0.229 -0.512 0.512 -0.512zm0 1.382c0.283 0 0.512 0.229 0.512 0.512s-0.229 0.512                      -0.512 0.512c-0.283 0 -0.512 -0.229 -0.512 -0.512 0 -0.283 0.229 -0.512 0.512 -0.512zm0 1.382c0.283 0 0.512 0.229 0.512                      0.512s-0.229 0.512 -0.512 0.512c-0.283 0 -0.512 -0.229 -0.512 -0.512 0 -0.283 0.229 -0.512 0.512 -0.512z"/></svg></span>
         </a>
       </div>
     </div>