feat: Enhance CSS styles and integrate clipboard script dependencies

- Added new utility classes for z-index, margin, and text decoration in the CSS file to improve layout flexibility.
- Updated the daily tests detail HTML to include a helper for clipboard script dependencies, streamlining the script management.
- Introduced responsive design adjustments for various elements to enhance user experience across different screen sizes.

Author: dhinesh-kumar-m

css/simba.css

@@ -395,6 +395,9 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .z-1 {
+    z-index: 1;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -638,6 +641,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .-mb-2 {
+    margin-bottom: calc(var(--spacing) * -2);
+  }
   .-mb-14 {
     margin-bottom: calc(var(--spacing) * -14);
   }
@@ -3056,6 +3062,12 @@
       top: calc(var(--spacing) * 1);
     }
   }
+  .after\:top-1\/2 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(1/2 * 100%);
+    }
+  }
   .after\:top-2 {
     &::after {
       content: var(--tw-content);
@@ -3110,12 +3122,24 @@
       z-index: 10;
     }
   }
+  .after\:mx-3 {
+    &::after {
+      content: var(--tw-content);
+      margin-inline: calc(var(--spacing) * 3);
+    }
+  }
   .after\:ms-3 {
     &::after {
       content: var(--tw-content);
       margin-inline-start: calc(var(--spacing) * 3);
     }
   }
+  .after\:hidden {
+    &::after {
+      content: var(--tw-content);
+      display: none;
+    }
+  }
   .after\:inline-block {
     &::after {
       content: var(--tw-content);
@@ -3628,6 +3652,13 @@
       }
     }
   }
+  .hover\:decoration-2 {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-thickness: 2px;
+      }
+    }
+  }
   .hover\:shadow-xs {
     &:hover {
       @media (hover: hover) {
@@ -3790,6 +3821,11 @@
       text-decoration-line: underline;
     }
   }
+  .focus\:decoration-2 {
+    &:focus {
+      text-decoration-thickness: 2px;
+    }
+  }
   .focus\:opacity-80 {
     &:focus {
       opacity: 80%;
@@ -4192,6 +4228,12 @@
       display: table-cell;
     }
   }
+  .sm\:size-6 {
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:w-11\/12 {
     @media (width >= 40rem) {
       width: calc(11/12 * 100%);
@@ -4506,6 +4548,11 @@
       text-align: end;
     }
   }
+  .sm\:text-start {
+    @media (width >= 40rem) {
+      text-align: start;
+    }
+  }
   .sm\:text-3xl {
     @media (width >= 40rem) {
       font-size: var(--text-3xl);
@@ -4596,6 +4643,14 @@
       }
     }
   }
+  .sm\:after\:block {
+    @media (width >= 40rem) {
+      &::after {
+        content: var(--tw-content);
+        display: block;
+      }
+    }
+  }
   .sm\:first\:ms-0 {
     @media (width >= 40rem) {
       &:first-child {
@@ -4653,6 +4708,15 @@
       }
     }
   }
+  .sm\:hover\:bg-stone-100 {
+    @media (width >= 40rem) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-stone-100);
+        }
+      }
+    }
+  }
   .sm\:focus\:bg-stone-100 {
     @media (width >= 40rem) {
       &:focus {
@@ -6363,6 +6427,20 @@
       background-color: var(--color-white);
     }
   }
+  .hs-dropdown-open\:visible {
+    &.hs-dropdown-menu.open {
+      visibility: visible;
+    }
+    .hs-dropdown.open>& {
+      visibility: visible;
+    }
+    .hs-dropdown.open>.hs-dropdown-toggle & {
+      visibility: visible;
+    }
+    .hs-dropdown.open>.hs-dropdown-menu>& {
+      visibility: visible;
+    }
+  }
   .hs-dropdown-open\:-rotate-180 {
     &.hs-dropdown-menu.open {
       rotate: calc(180deg * -1);

src/simba/mentor/daily_tests/detail/index.html

@@ -31,6 +31,5 @@
 {% endblock content %}
 
 {% block extra_scripts %}
-<script src="https://preline.co/assets/vendor/clipboard/dist/clipboard.min.js"></script>
-<script src="https://preline.co/assets/js/hs-copy-clipboard-helper.js"></script>
+{% include 'src/simba/helpers/clipboard_script_dependencies.html' %}
 {% endblock extra_scripts %}