9870 - Expand dropdown box and search bar to fit length of text

network-api/networkapi/templates/fragments/buyersguide/pni_category_nav.html

@@ -19,13 +19,13 @@
             </div>
             {% include "fragments/buyersguide/category_dropdown.html" %}
 
-            <div id="product-filter-search" tabindex="0" class="tw-hidden large:tw-inline-flex tw-px-2 tw-items-center tw-bg-blue-05 tw-border-4 tw-border-blue-05 tw-w-[214px] tw-mr-2">
+            <div id="product-filter-search" tabindex="0" class="tw-hidden large:tw-inline-flex tw-px-2 tw-items-center tw-bg-blue-05 tw-border-4 tw-border-blue-05 tw-w-[250px] tw-mr-2">
               <img
                 class="tw-w-4 tw-h-4 tw-mr-2"
                 src="{% static "_images/buyers-guide/pni-search.svg" %}"
               >
               <input type="text" role="searchbox" id="product-filter-search-input" placeholder="{% trans "Search all products" %}" value=""
-              class="tw-bg-blue-05 tw-outline-none tw-py-2 tw-text-base tw-text-blue-60 tw-min-w-0 placeholder:tw-text-blue-60" />
+              class="tw-bg-blue-05 tw-outline-none tw-py-2 tw-text-base tw-text-blue-60 tw-min-w-0 placeholder:tw-text-blue-60 placeholder:tw-text-[14px] tw-w-full" />
               <label for="product-filter-search-input" class="clear-icon">&nbsp;</label>
             </div>
           </div>

network-api/networkapi/templates/fragments/buyersguide/pni_sort_dropdown.html

@@ -29,7 +29,7 @@
     </li>
 
     
-    <li aria-expanded="false" role="list" class="tw-absolute tw-top-0 tw-hidden tw-left-0 pni-creepiness__list-container tw-w-[250px] tw-z-50 tw-bg-white tw-border tw-border-gray-20">
+    <li aria-expanded="false" role="list" class="tw-absolute tw-top-0 tw-hidden tw-left-0 pni-creepiness__list-container tw-z-50 tw-bg-white tw-border tw-border-gray-20">
       <ul class="pni-creepiness__list tw-w-full tw-list-none tw-m-0 tw-p-0">
         <li class="pni-creepiness__list-item tw-whitespace-nowrap tw-p-3 tw-text-sm tw-font-bold tw-group tw-font-sans tw-flex tw-items-center tw-overflow-ellipsis" tabindex="0" id="option-1" data-value="ASCENDING">
           <div class="tw-flex tw-items-center tw-text-sm tw-font-bold tw-text-gray-40 group-hover:tw-text-black tw-font-sans tw-pointer-events-none">