fix: Add a chevron to prevent unintentional toggle collapsing.

Signed-off-by: Jerrico Dela Cruz <[email protected]>
Avanade · Sep 24, 2024 · 1e413a9 · 1e413a9
1 parent d83f612
commit 1e413a9
Showing 6 changed files with 320 additions and 202 deletions.
diff --git a/src/goapp/go.mod b/src/goapp/go.mod
@@ -3,7 +3,7 @@ module main
 go 1.18
 
 require (
-	github.com/Azure/azure-sdk-for-go/sdk/azidentity v1.6.0
+	github.com/Azure/azure-sdk-for-go/sdk/azidentity v1.7.0
 	github.com/Azure/azure-sdk-for-go/sdk/keyvault/azsecrets v0.7.1
 	github.com/coreos/go-oidc v2.2.1+incompatible
 	github.com/gorilla/mux v1.8.0

diff --git a/src/goapp/go.sum b/src/goapp/go.sum
@@ -2,8 +2,8 @@ github.com/Azure/azure-sdk-for-go/sdk/azcore v0.19.0/go.mod h1:h6H6c8enJmmocHUbL
 github.com/Azure/azure-sdk-for-go/sdk/azcore v1.11.1 h1:E+OJmp2tPvt1W+amx48v1eqbjDYsgN+RzP4q16yV5eM=
 github.com/Azure/azure-sdk-for-go/sdk/azcore v1.11.1/go.mod h1:a6xsAQUZg+VsS3TJ05SRp524Hs4pZ/AeFSr5ENf0Yjo=
 github.com/Azure/azure-sdk-for-go/sdk/azidentity v0.11.0/go.mod h1:HcM1YX14R7CJcghJGOYCgdezslRSVzqwLf/q+4Y2r/0=
-github.com/Azure/azure-sdk-for-go/sdk/azidentity v1.6.0 h1:U2rTu3Ef+7w9FHKIAXM6ZyqF3UOWJZ12zIm8zECAFfg=
-github.com/Azure/azure-sdk-for-go/sdk/azidentity v1.6.0/go.mod h1:9kIvujWAA58nmPmWB1m23fyWic1kYZMxD9CxaWn4Qpg=
+github.com/Azure/azure-sdk-for-go/sdk/azidentity v1.7.0 h1:tfLQ34V6F7tVSwoTf/4lH5sE0o6eCJuNDTmH09nDpbc=
+github.com/Azure/azure-sdk-for-go/sdk/azidentity v1.7.0/go.mod h1:9kIvujWAA58nmPmWB1m23fyWic1kYZMxD9CxaWn4Qpg=
 github.com/Azure/azure-sdk-for-go/sdk/internal v0.7.0/go.mod h1:yqy467j36fJxcRV2TzfVZ1pCb5vxm4BtZPUdYWe/Xo8=
 github.com/Azure/azure-sdk-for-go/sdk/internal v1.8.0 h1:jBQA3cKT4L2rWMpgE7Yt3Hwh2aUj8KXjIGLxjHeYNNo=
 github.com/Azure/azure-sdk-for-go/sdk/internal v1.8.0/go.mod h1:4OG6tQ9EOP/MT0NMjDlRzWoVFxfu9rN9B2X+tlSVktg=

diff --git a/src/goapp/public/css/output.css b/src/goapp/public/css/output.css
@@ -1811,6 +1811,11 @@ select {
   bottom: 0px;
 }
 
+.inset-x-0 {
+  left: 0px;
+  right: 0px;
+}
+
 .bottom-full {
   bottom: 100%;
 }
@@ -1851,6 +1856,10 @@ select {
   top: 100%;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .isolate {
   isolation: isolate;
 }
@@ -1991,12 +2000,8 @@ select {
   margin-left: 0.75rem;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
-.mr-1\.5 {
-  margin-right: 0.375rem;
+.ml-auto {
+  margin-left: auto;
 }
 
 .mr-2 {
@@ -2047,6 +2052,10 @@ select {
   margin-top: 2rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .box-border {
   box-sizing: border-box;
 }
@@ -2182,10 +2191,18 @@ select {
   height: 2rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
 
+.max-h-full {
+  max-height: 100%;
+}
+
 .min-h-0 {
   min-height: 0px;
 }
@@ -2234,10 +2251,6 @@ select {
   width: 2rem;
 }
 
-.w-96 {
-  width: 24rem;
-}
-
 .w-auto {
   width: auto;
 }
@@ -2648,6 +2661,10 @@ select {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -3453,6 +3470,11 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-blue-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -4243,6 +4265,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -4255,12 +4283,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -6398,10 +6420,6 @@ select {
     justify-content: flex-end;
   }
 
-  .sm\:justify-between {
-    justify-content: space-between;
-  }
-
   .sm\:gap-4 {
     gap: 1rem;
   }

diff --git a/src/goapp/tailwind/package-lock.json b/src/goapp/tailwind/package-lock.json
diff --git a/src/goapp/templates/myapprovals.html b/src/goapp/templates/myapprovals.html
@@ -165,94 +165,117 @@
 
   //PENDING REQUEST
   function pendingRenderItem(item){
-    return `<div x-on:click="item.show = !item.show">
-              <a class="block hover:bg-gray-50">
-                <div class="px-4 py-4 sm:px-6 cursor-pointer">
-                  <div class="flex items-center justify-between">
-                    <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
-                    <div class="relative mt-1">
-                      <button 
-                          x-show="item.allowReassign" 
-                          @click.stop @click.outside="item.show2 = false "
-                          x-on:click="item.show2 = !item.show2" 
-                          type="button"
-                          class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
-                              viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                              <path stroke-linecap="round" stroke-linejoin="round"
-                                  d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
-                              </path>
-                          </svg>
-                      </button>
-                      <ul x-show=item.show2
-                          class="absolute z-10 mt-1 max-h-60 right-0 top-1 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-                          id="options" role="listbox" style="">
-                          <a x-bind:href="item.allowReassignUrl">
-                              <li @click.stop
-                                  class="hover:bg-[#fff2eb] relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900"
-                                  id="option-0" role="option" tabindex="-1">
-                                  <span class="block truncate">Reassign </span>
-                              </li>
-                          </a>
-                      </ul>
-                    </div>
-                  </div>
-                  <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
-                      <div><p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p></div>
-                      <div><p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p></div>
-                      <div><p x-data="{ requestedBy: 'Requested by: ' + item.requestedBy}" x-text="requestedBy"></p></div>
-                      <div>
-                        <p>
-                          Requested on 
-                          <time x-data="{date: new Date(item.created.replace(' ', 'T').replace(' +0000 UTC', '') + 'Z')}"
-                                x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
-                        </p>
-                      </div>
-                      <div class="flex items-center">
-                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p> 
-                        <template x-if="item.approvers.length > 1">
-                          <div x-data="popup({
-                            content: renderApprovers(item.approvers),
-                            placement: 'top',
-                            popupClass: 'shadow-md'
-                          })" @mouseover="showPopup" @mouseover.away="hidePopup">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-                            </svg>
-                            <div x-html="template"></div>
-                          </div>
-                        </template>
-                      </div>
-                    </div>
-                </div>
-                <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
-                  <div x-html="item.body" class="text-sm"></div>
-                    <div>
-                      <table style="margin: 10px 0;width:100%; text-align: center;">
-                        <tr>
-                            <td colspan="5" style="padding: 5px 0;">To process your response, click any of the buttons below:</td>
-                        </tr>
-                        
-                        <tr style="color: white;">
-                          <td style="padding: 5px 0px; width: 20%; "></td>
-                            
-                            <td style="padding: 5px 0px; width: 26%; background-color: green;" @click.stop>
-                                <a x-bind:href="item.approveUrl" x-text="item.approveText" style="color: white;">
-                                </a>
-                            </td>
-                            <td style="padding: 5px 0px; width: 8%; "></td>
-                            <td style="padding: 5px 0px; width: 26%; background-color: red;" @click.stop>
-                                <a x-bind:href="item.rejectUrl" x-text="item.rejectText" style="color: white;">
-                                </a>
-                            </td>
-                            <td style="padding: 5px 0px; width: 20%; "></td>
-                        </tr>
-                      </table>
-                    </div>
-                  </div>
-                </div>
+    return `<div class="block hover:bg-gray-50">
+  <div class="px-4 py-4 sm:px-6">
+    <div class="flex items-center justify-between">
+      <div class="grow">
+        <div class="items-center justify-between">
+          <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
+        </div>
+        <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
+          <div>
+            <p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p>
+          </div>
+          <div>
+            <p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p>
+          </div>
+          <div>
+            <p x-data="{ requestedBy: 'Requested by: ' + item.requestedBy}" x-text="requestedBy"></p>
+          </div>
+          <div>
+            <p>
+              Requested on
+              <time x-data="{date: new Date(item.created.replace(' ', 'T').replace(' +0000 UTC', '') + 'Z')}"
+                x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
+            </p>
+          </div>
+          <div class="flex items-center">
+            <p>Approver/s: <span x-text="item.approvers[0]"></span></p>
+            <template x-if="item.approvers.length > 1">
+              <div x-data="popup({
+                              content: renderApprovers(item.approvers),
+                              placement: 'top',
+                              popupClass: 'shadow-md'
+                            })" @mouseover="showPopup" @mouseover.away="hidePopup">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                  stroke="currentColor" class="w-4 h-4">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                </svg>
+                <div x-html="template"></div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+      <div class="relative self-stretch w-5">
+        <div class="absolute top-0 right-0">
+          <div class="relative">
+            <button x-show="item.allowReassign" @click.stop @click.outside="item.show2 = false "
+              x-on:click="item.show2 = !item.show2" type="button"
+              class="absolute inset-y-0 right-0 flex items-center rounded-r-md focus:outline-none">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
+                stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z">
+                </path>
+              </svg>
+            </button>
+            <ul x-show=item.show2
+              class="absolute z-10 mt-1 max-h-60 right-0 top-1 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+              id="options" role="listbox" style="">
+              <a x-bind:href="item.allowReassignUrl">
+                <li @click.stop class="hover:bg-[#fff2eb] relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900"
+                  id="option-0" role="option" tabindex="-1">
+                  <span class="block truncate">Reassign </span>
+                </li>
               </a>
-            </div>`
+            </ul>
+          </div>
+        </div>
+        <div class="absolute bottom-0">
+          <button x-on:click="item.show = !item.show">
+            <template x-if="!item.show">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
+              </svg>
+            </template>
+            <template x-if="item.show">
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+              </svg>
+            </template>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
+    <div x-html="item.body" class="text-sm"></div>
+    <div>
+      <table style="margin: 10px 0;width:100%; text-align: center;">
+        <tr>
+          <td colspan="5" style="padding: 5px 0;">To process your response, click any of the buttons below:</td>
+        </tr>
+
+        <tr style="color: white;">
+          <td style="padding: 5px 0px; width: 20%; "></td>
+
+          <td style="padding: 5px 0px; width: 26%; background-color: green;" @click.stop>
+            <a x-bind:href="item.approveUrl" x-text="item.approveText" style="color: white;">
+            </a>
+          </td>
+          <td style="padding: 5px 0px; width: 8%; "></td>
+          <td style="padding: 5px 0px; width: 26%; background-color: red;" @click.stop>
+            <a x-bind:href="item.rejectUrl" x-text="item.rejectText" style="color: white;">
+            </a>
+          </td>
+          <td style="padding: 5px 0px; width: 20%; "></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>`
   }
 
   async function pendingCallback(e){
@@ -261,54 +284,82 @@
 
   //CLOSED REQUEST
   function closedRenderItem(item){
-    return `<div x-on:click="item.show = !item.show">
-              <a class="block hover:bg-gray-50">
-                <div class="px-4 py-4 sm:px-6 cursor-pointer">
-                  <div class="flex items-center justify-between">
-                    <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
-                    <div class="ml-2 flex-shrink-0 flex">
-                      <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-                        x-bind:class="item.isApproved? 'bg-green-100 text-green-800':'bg-red-100 text-red-800'"
-                        x-text="item.isApproved ? 'Approved' : 'Rejected'"></p>
+    return `<div class="block hover:bg-gray-50">
+              <div class="px-4 py-4 sm:px-6">
+                <div class="flex items-center justify-between">
+                  <div class="grow">
+                    <div class="flex items-center justify-between">
+                      <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
+                      <div class="ml-2 flex-shrink-0 flex">
+                        <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
+                          x-bind:class="item.isApproved? 'bg-green-100 text-green-800':'bg-red-100 text-red-800'"
+                          x-text="item.isApproved ? 'Approved' : 'Rejected'"></p>
+                      </div>
                     </div>
-                  </div>
-                  <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
-                      <div><p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p></div>
-                      <div><p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p></div>
-                      <div><p x-data="{ requestedBy: 'Requested by: ' + item.requestedBy}" x-text="requestedBy"></p></div>
+                    <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
+                      <div>
+                        <p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p>
+                      </div>
+                      <div>
+                        <p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p>
+                      </div>
+                      <div>
+                        <p x-data="{ requestedBy: 'Requested by: ' + item.requestedBy}" x-text="requestedBy"></p>
+                      </div>
                       <div>
                         <p>
-                          Responded on 
+                          Responded on
                           <time x-data="{date: new Date(item.dateResponded.replace(' ', 'T').replace(' +0000 UTC', '') + 'Z')}"
-                                x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
+                            x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
                         </p>
                       </div>
                       <div @click.stop class="flex items-center">
-                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p> 
+                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p>
                         <template x-if="item.approvers.length > 1">
                           <div x-data="popup({
-                            content: renderApprovers(item.approvers),
-                            placement: 'top',
-                            popupClass: 'shadow-md'
-                          })" @mouseover="showPopup" @mouseover.away="hidePopup">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                          content: renderApprovers(item.approvers),
+                                          placement: 'top',
+                                          popupClass: 'shadow-md'
+                                        })" @mouseover="showPopup" @mouseover.away="hidePopup">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                              stroke="currentColor" class="w-4 h-4">
+                              <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                             </svg>
                             <div x-html="template"></div>
                           </div>
                         </template>
                       </div>
-                      <div><p x-data="{ respondedBy: 'Responded by: ' + item.respondedBy}" x-text="respondedBy"></p></div>
+                      <div>
+                        <p x-data="{ respondedBy: 'Responded by: ' + item.respondedBy}" x-text="respondedBy"></p>
+                      </div>
                     </div>
-                </div>
-                <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
-                  <div x-html="item.body" class="text-sm"></div>
-                  <div class="border-[1px] mt-2 p-3 rounded-md">
-                    <div class="text-sm font-medium text-gray-800 truncate pb-2">Remarks</div>
-                    <div x-text="item.approverRemarks? item.approverRemarks:'none'" class="text-sm"></div>
+                  </div>
+                  <div class="relative mt-1">
+                    <button class="ml-auto" x-on:click="item.show = !item.show">
+                      <template x-if="!item.show">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20"
+                          stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </template>
+                      <template x-if="item.show">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20"
+                          stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+                        </svg>
+                      </template>
+                    </button>
                   </div>
                 </div>
-              </a>
+              </div>
+              <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
+                <div x-html="item.body" class="text-sm"></div>
+                <div class="border-[1px] mt-2 p-3 rounded-md">
+                  <div class="text-sm font-medium text-gray-800 truncate pb-2">Remarks</div>
+                  <div x-text="item.approverRemarks? item.approverRemarks:'none'" class="text-sm"></div>
+                </div>
+              </div>
             </div>`
   }
 

diff --git a/src/goapp/templates/myrequests.html b/src/goapp/templates/myrequests.html
@@ -152,43 +152,65 @@
   }
   //PENDING REQUEST
   function pendingRenderItem(item){
-    return `<div x-on:click="item.show = !item.show">
-              <a class="block hover:bg-gray-50">
-                <div class="px-4 py-4 sm:px-6 cursor-pointer">
-                  <div class="flex items-center justify-between">
-                    <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
-                  </div>
-                  <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
-                      <div><p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p></div>
+    return `<div class="block hover:bg-gray-50">
+              <div class="px-4 py-4 sm:px-6">
+                <div class="flex items-center justify-between">
+                  <div class="grow">
+                    <div class="items-center justify-between">
+                      <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
+                    </div>
+                    <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
+                      <div>
+                        <p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p>
+                      </div>
                       <div>
                         <p>
-                          Requested on 
+                          Requested on
                           <time x-data="{date: new Date(item.created.replace(' ', 'T').replace(' +0000 UTC', '') + 'Z')}"
-                                x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
+                            x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
                         </p>
                       </div>
-                      <div><p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p></div>
+                      <div>
+                        <p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p>
+                      </div>
                       <div class="flex items-center">
-                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p> 
+                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p>
                         <template x-if="item.approvers.length > 1">
                           <div x-data="popup({
-                            content: renderApprovers(item.approvers),
-                            placement: 'top',
-                            popupClass: 'shadow-md'
-                          })" @mouseover="showPopup" @mouseover.away="hidePopup">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                          content: renderApprovers(item.approvers),
+                                          placement: 'top',
+                                          popupClass: 'shadow-md'
+                                        })" @mouseover="showPopup" @mouseover.away="hidePopup">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                              stroke="currentColor" class="w-4 h-4">
+                              <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                             </svg>
                             <div x-html="template"></div>
                           </div>
                         </template>
                       </div>
                     </div>
+                  </div>
+                  <div class="relative mt-1">
+                    <button class="ml-auto" x-on:click="item.show = !item.show">
+                      <template x-if="!item.show">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                      </template>
+                      <template x-if="item.show">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+                        </svg>
+                      </template>
+                    </button>
+                  </div>
                 </div>
-                <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
-                    <div x-html="item.body" class="text-sm"></div>
-                </div>
-              </a>
+              </div>
+              <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
+                <div x-html="item.body" class="text-sm"></div>
+              </div>
             </div>`
   }
 
@@ -198,54 +220,80 @@
 
   //CLOSED REQUEST
   function closedRenderItem(item){
-    return `<div x-on:click="item.show = !item.show">
-              <a class="block hover:bg-gray-50">
-                <div class="px-4 py-4 sm:px-6 cursor-pointer">
-                  <div class="flex items-center justify-between">
-                    <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
-                    <div class="ml-2 flex-shrink-0 flex">
-                      <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-                        x-bind:class="item.isApproved? 'bg-green-100 text-green-800':'bg-red-100 text-red-800'"
-                        x-text="item.isApproved ? 'Approved' : 'Rejected'"></p>
+    return `<div class="block hover:bg-gray-50">
+              <div class="px-4 py-4 sm:px-6">
+                <div class="flex items-center justify-between">
+                  <div class="grow">
+                    <div class="flex items-center justify-between">
+                      <p class="text-sm font-medium text-gray-800 truncate" x-text="item.subject"></p>
+                      <div class="ml-2 flex-shrink-0 flex">
+                        <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
+                          x-bind:class="item.isApproved? 'bg-green-100 text-green-800':'bg-red-100 text-red-800'"
+                          x-text="item.isApproved ? 'Approved' : 'Rejected'"></p>
+                      </div>
                     </div>
-                  </div>
-                  <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
-                      <div><p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p></div>
-                      <div><p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p></div>
-                      <div><p x-data="{ respondedBy: 'Responded by: ' + item.respondedBy}" x-text="respondedBy"></p></div>
+                    <div class="grid grid-cols-2 text-sm text-sm text-gray-500">
+                      <div>
+                        <p x-data="{ app: 'Application: ' + item.application}" x-text="app"></p>
+                      </div>
+                      <div>
+                        <p x-data="{ mod: 'Module: ' + item.module}" x-text="mod"></p>
+                      </div>
+                      <div>
+                        <p x-data="{ respondedBy: 'Responded by: ' + item.respondedBy}" x-text="respondedBy"></p>
+                      </div>
                       <div @click.stop class="flex items-center">
-                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p> 
+                        <p>Approver/s: <span x-text="item.approvers[0]"></span></p>
                         <template x-if="item.approvers.length > 1">
                           <div x-data="popup({
-                            content: renderApprovers(item.approvers),
-                            placement: 'top',
-                            popupClass: 'shadow-md'
-                          })" @mouseover="showPopup" @mouseover.away="hidePopup">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
-                              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                          content: renderApprovers(item.approvers),
+                                          placement: 'top',
+                                          popupClass: 'shadow-md'
+                                        })" @mouseover="showPopup" @mouseover.away="hidePopup">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                              stroke="currentColor" class="w-4 h-4">
+                              <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                             </svg>
                             <div x-html="template"></div>
                           </div>
                         </template>
                       </div>
                       <div>
                         <p>
-                          Responded on 
+                          Responded on
                           <time x-data="{date: new Date(item.dateResponded.replace(' ', 'T').replace(' +0000 UTC', '') + 'Z')}"
-                                x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
+                            x-text="date.toLocaleString('en-US',{dateStyle: 'medium', timeStyle: 'short'})"></time>
                         </p>
                       </div>
                     </div>
-                </div>
-                <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
-                  <div x-html="item.body" class="text-sm"></div>
-                  <div class="border-[1px] mt-2 p-3 rounded-md">
-                    <div class="text-sm font-medium text-gray-800 truncate pb-2">Remarks</div>
-                    <div x-text="item.approverRemarks? item.approverRemarks:'none'" class="text-sm"></div>
+                  </div>
+                  <div class="relative mt-1">
+                    <button class="ml-auto" x-on:click="item.show = !item.show">
+                      <template x-if="!item.show">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20"
+                          stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </template>
+                      <template x-if="item.show">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 20 20"
+                          stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+                        </svg>
+                      </template>
+                    </button>
                   </div>
                 </div>
-              </a>
-            </div>`
+              </div>
+              <div x-show="item.show" class="border-t-[1px] border-gray-100 mt-3 pt-3">
+                <div x-html="item.body" class="text-sm"></div>
+                <div class="border-[1px] mt-2 p-3 rounded-md">
+                  <div class="text-sm font-medium text-gray-800 truncate pb-2">Remarks</div>
+                  <div x-text="item.approverRemarks? item.approverRemarks:'none'" class="text-sm"></div>
+                </div>
+              </div>
+          </div>`
   }
 
   async function closedCallback(e){