From 78a5dcb93960197cefa3f44b05ca4b9fd496f55e Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Wed, 10 May 2023 08:27:14 -0400
Subject: [PATCH] :bug: fixes wrapping in header

closes: #218
---
 static/css/styles.css           | 16 ++++++++++++++++
 templates/includes/_header.html | 14 +++++++-------
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 32408a9c..67ea14fb 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1409,6 +1409,22 @@ input[type=file] {
   width: 200px;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
+.w-60 {
+  width: 15rem;
+}
+
+.w-48 {
+  width: 12rem;
+}
+
+.w-44 {
+  width: 11rem;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index 45be5aaa..b67a9ba9 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -18,16 +18,16 @@
           </a>
         </div>
         <div class="flex pt-5 w-full">
-          <nav class="relative items-center pl-6 space-x-10 w-3/4 text-lg text-left">
+          <nav class="relative items-center pl-6 space-x-10 w-full text-lg text-left">
             <a href="{% url 'news' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">News</a>
             <a href="{% url 'docs' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Learn</a>
             <a href="/forum/" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Community</a>
             <a href="/libraries/" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Libraries</a>
             <a href="#" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Releases</a>
           </nav>
-          <nav class="items-center space-x-5 w-1/4 text-right" x-data="{ 'searchOpen': false }">
+          <nav class="items-center space-x-5 text-right float-right w-44" x-data="{ 'searchOpen': false }">
             <span class="relative">
-              <i class="inline-flex -mt-1 cursor-pointer text-slate fas fa-search dark:text-white/50 dark:hover:text-orange hover:text-orange" @click="searchOpen = !searchOpen"></i>
+              <i class="inline -mt-1 cursor-pointer text-slate fas fa-search dark:text-white/50 dark:hover:text-orange hover:text-orange" @click="searchOpen = !searchOpen"></i>
               <div x-show="searchOpen"
                    @click.away="searchOpen = false"
                    x-transition:enter="transition ease-out duration-100"
@@ -63,7 +63,7 @@
               </div>
             </span>
 
-            <a href="{% url 'support' %}" class="inline-flex"><i class="text-slate fas fa-question-circle dark:text-white/50 dark:hover:text-orange hover:text-orange"></i></a>
+            <a href="{% url 'support' %}" class="inline"><i class="text-slate fas fa-question-circle dark:text-white/50 dark:hover:text-orange hover:text-orange"></i></a>
 
             <!-- theme switcher -->
             <span x-data="{ 'modeOpen': false }" class="relative">
@@ -120,12 +120,12 @@
 
             <span x-data="{ 'userOpen': false }" class="relative">
               {% if not user.is_authenticated %}
-                <a href="{% url 'account_signup' %}" class="font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
+                <a href="{% url 'account_signup' %}" class="inline font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
               {% else %}
                 {% if user.image %}
-                  <img src="{{ user.image.url }}" alt="user" class="inline-flex rounded-sm cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
+                  <img src="{{ user.image.url }}" alt="user" class="inline rounded-sm cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
                 {% else %}
-                  <i class="inline-flex mr-2 text-5xl fas fa-user text-charcoal dark:text-white/60"></i>
+                  <i class="inline mr-2 text-5xl fas fa-user text-charcoal dark:text-white/60"></i>
                 {% endif %}
               {% endif %}