put title above info in modal, add class specifically for parentheticals

themes/gallo/layouts/partials/rental_catalog.html

@@ -52,7 +52,21 @@
     {{ end }}
     <div class="px-1 pt-4">
       <div class="flex flex-row gap-2 justify-between font-bold text-xl mb-2">
-        {{ .item }} {{ if ne .cat "" }}
+        {{- $text := .item -}} {{- $parts := split $text "(" -}}
+
+        <div
+          class="relative flex flex-col gap-0 text-2xl mb-2 font-bold italic"
+          id="modal-title"
+        >
+          {{- with index $parts 0 -}} {{ . }} {{- end -}} {{- if gt (len $parts)
+          1 -}}
+          <span class="text-sm text-gray-600">
+            {{- $innerParts := split (index $parts 1) ")" -}} {{- with index
+            $innerParts 0 -}} ({{ . }}) {{- end -}}
+          </span>
+          {{- if gt (len $innerParts) 1 -}} {{- index $innerParts 1 -}} {{- end
+          -}} {{- end -}}
+        </div>
         <div>
           <span
             style="white-space: nowrap"
@@ -60,7 +74,6 @@
             >{{ .cat }}</span
           >
         </div>
-        {{ end }}
       </div>
       <div class="text-sm text-gray-800 text-base mb-4">
         {{ if ne .quant "" }}
@@ -128,30 +141,41 @@
           id="modal-overlay"
           class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle self-center sm:max-w-xl w-full md:max-w-[800px]"
         >
-          <div
-            id="modal-overlay"
-            class="bg-white px-4 pt-5 pb-4 sm:p-4 sm:pb-4 md:p-8"
-          >
+          <div id="modal-overlay" class="bg-white p-4">
             <div class="sm:flex sm:items-start">
               <div class="z-20 w-full mt-3 text-center sm:mt-0 sm:text-left">
-                <div
-                  class="relative text-xl mb-2 font-semibold"
-                  id="modal-title"
-                >
-                  {{ .item }}
-                </div>
                 <div class="flex flex-col sm:flex-row">
                   {{ if .gallery }}
                   <div class="carousel w-full md:w-2/3 sm:w-1/2 mx-auto">
                     {{ partial "carousel.html" . }}
                   </div>
                   {{ end }}
-                  <div class="z-20 pt-4 sm:pt-0 sm:pl-4 w-full md:w-1/3 sm:w-1/2">
+                  <div
+                    class="z-20 pt-4 sm:pt-0 sm:pl-4 w-full md:w-1/3 sm:w-1/2"
+                  >
                     <div
                       class="flex flex-col h-full justify-between text-md text-gray-800 text-base"
                     >
                       <div>
                         <div>
+                          {{- $text := .item -}} {{- $parts := split $text "("
+                          -}}
+
+                          <div
+                            class="relative flex flex-col gap-0 text-2xl mb-2 font-bold italic"
+                            id="modal-title"
+                          >
+                            {{- with index $parts 0 -}} {{ . }} {{- end -}} {{-
+                            if gt (len $parts) 1 -}}
+                            <span class="text-sm text-gray-600">
+                              {{- $innerParts := split (index $parts 1) ")" -}}
+                              {{- with index $innerParts 0 -}} ({{ . }}) {{- end
+                              -}}
+                            </span>
+                            {{- if gt (len $innerParts) 1 -}} {{- index
+                            $innerParts 1 -}} {{- end -}} {{- end -}}
+                          </div>
+
                           {{ if ne .deliveryPickup "" }}
                           <div class="flex flex-row justify-between">
                             <strong>Rental Cost:</strong>