From 917649b97acc294c0f3b24f40f4027511a0dca8f Mon Sep 17 00:00:00 2001
From: Bruno Bernardino <me@brunobernardino.com>
Date: Wed, 25 Feb 2026 15:10:37 +0000
Subject: [PATCH] Fix ring opacity in dropdowns

---
 components/calendar/MainCalendar.tsx       | 4 ++--
 components/calendar/SearchEvents.tsx       | 2 +-
 components/contacts/Contacts.tsx           | 4 ++--
 components/expenses/MainExpenses.tsx       | 2 +-
 components/files/MainFiles.tsx             | 4 ++--
 components/files/SearchFiles.tsx           | 2 +-
 components/news/Articles.tsx               | 2 +-
 components/news/Feeds.tsx                  | 2 +-
 components/notes/MainNotes.tsx             | 2 +-
 components/photos/MainPhotos.tsx           | 2 +-
 docker-compose.yml                         | 2 +-
 public/components/calendar/MainCalendar.js | 4 ++--
 public/components/calendar/SearchEvents.js | 2 +-
 public/components/contacts/Contacts.js     | 4 ++--
 public/components/expenses/MainExpenses.js | 2 +-
 public/components/files/MainFiles.js       | 4 ++--
 public/components/files/SearchFiles.js     | 2 +-
 public/components/news/Articles.js         | 2 +-
 public/components/news/Feeds.js            | 2 +-
 public/components/notes/MainNotes.js       | 2 +-
 public/components/photos/MainPhotos.js     | 2 +-
 public/css/tailwind.css                    | 7 +++++--
 22 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/components/calendar/MainCalendar.tsx b/components/calendar/MainCalendar.tsx
index 41ffeb6..95bf70f 100644
--- a/components/calendar/MainCalendar.tsx
+++ b/components/calendar/MainCalendar.tsx
@@ -448,7 +448,7 @@ export default function MainCalendar(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isViewOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
@@ -509,7 +509,7 @@ export default function MainCalendar(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isImportExportOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/calendar/SearchEvents.tsx b/components/calendar/SearchEvents.tsx
index 26605e1..571ab20 100644
--- a/components/calendar/SearchEvents.tsx
+++ b/components/calendar/SearchEvents.tsx
@@ -111,7 +111,7 @@ export default function SearchEvents({ calendars, onClickOpenEvent }: SearchEven
         ? (
           <section class='relative inline-block text-left ml-2 text-xs'>
             <section
-              class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none`}
+              class={`absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none`}
               role='menu'
               aria-orientation='vertical'
               aria-labelledby='view-button'
diff --git a/components/contacts/Contacts.tsx b/components/contacts/Contacts.tsx
index b9822a0..dd4efcb 100644
--- a/components/contacts/Contacts.tsx
+++ b/components/contacts/Contacts.tsx
@@ -359,7 +359,7 @@ export default function Contacts(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-slate-600 rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-slate-600 rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isAddressBooksDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
@@ -424,7 +424,7 @@ export default function Contacts(
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/expenses/MainExpenses.tsx b/components/expenses/MainExpenses.tsx
index 893213d..28967ee 100644
--- a/components/expenses/MainExpenses.tsx
+++ b/components/expenses/MainExpenses.tsx
@@ -727,7 +727,7 @@ export default function MainExpenses({ initialBudgets, initialExpenses, initialM
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !areNewOptionsOption.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/files/MainFiles.tsx b/components/files/MainFiles.tsx
index df77044..baed010 100644
--- a/components/files/MainFiles.tsx
+++ b/components/files/MainFiles.tsx
@@ -751,7 +751,7 @@ export default function MainFiles(
                   </div>
 
                   <div
-                    class={`absolute left-0 z-10 mt-2 w-44 origin-top-left rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+                    class={`absolute left-0 z-10 mt-2 w-44 origin-top-left rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                       !areBulkOptionsOpen.value ? 'hidden' : ''
                     }`}
                     role='menu'
@@ -802,7 +802,7 @@ export default function MainFiles(
                 </div>
 
                 <div
-                  class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+                  class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                     !areNewOptionsOpen.value ? 'hidden' : ''
                   }`}
                   role='menu'
diff --git a/components/files/SearchFiles.tsx b/components/files/SearchFiles.tsx
index 53e01cd..289b46f 100644
--- a/components/files/SearchFiles.tsx
+++ b/components/files/SearchFiles.tsx
@@ -111,7 +111,7 @@ export default function SearchFiles() {
         ? (
           <section class='relative inline-block text-left ml-2 text-sm'>
             <section
-              class={`absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-slate-600 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none overflow-y-scroll max-h-[80%] min-h-56`}
+              class={`absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-slate-600 shadow-lg ring-1 ring-black/15 focus:outline-none overflow-y-scroll max-h-[80%] min-h-56`}
               role='menu'
               aria-orientation='vertical'
               aria-labelledby='view-button'
diff --git a/components/news/Articles.tsx b/components/news/Articles.tsx
index 7ea405c..a422f75 100644
--- a/components/news/Articles.tsx
+++ b/components/news/Articles.tsx
@@ -181,7 +181,7 @@ export default function Articles({ initialArticles }: ArticlesProps) {
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isFilterDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/news/Feeds.tsx b/components/news/Feeds.tsx
index acb9c63..bc4924b 100644
--- a/components/news/Feeds.tsx
+++ b/components/news/Feeds.tsx
@@ -254,7 +254,7 @@ export default function Feeds({ initialFeeds }: FeedsProps) {
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !isOptionsDropdownOpen.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/notes/MainNotes.tsx b/components/notes/MainNotes.tsx
index 3fa274d..bcf9672 100644
--- a/components/notes/MainNotes.tsx
+++ b/components/notes/MainNotes.tsx
@@ -250,7 +250,7 @@ export default function MainNotes({ initialDirectories, initialFiles, initialPat
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !areNewOptionsOption.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/components/photos/MainPhotos.tsx b/components/photos/MainPhotos.tsx
index 39a2b4f..2112d77 100644
--- a/components/photos/MainPhotos.tsx
+++ b/components/photos/MainPhotos.tsx
@@ -166,7 +166,7 @@ export default function MainPhotos({ initialDirectories, initialFiles, initialPa
             </div>
 
             <div
-              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${
+              class={`absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${
                 !areNewOptionsOption.value ? 'hidden' : ''
               }`}
               role='menu'
diff --git a/docker-compose.yml b/docker-compose.yml
index c7114ad..1782ff5 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,6 +1,6 @@
 services:
   website:
-    image: ghcr.io/bewcloud/bewcloud:v4.0.2
+    image: ghcr.io/bewcloud/bewcloud:v4.0.3
     # NOTE: uncomment below (and comment above) only if you pulled the repo and want to build the image locally
     # build:
     #   context: .
diff --git a/public/components/calendar/MainCalendar.js b/public/components/calendar/MainCalendar.js
index a61ec0b..eee6ebe 100644
--- a/public/components/calendar/MainCalendar.js
+++ b/public/components/calendar/MainCalendar.js
@@ -361,7 +361,7 @@ export default function MainCalendar({
     d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
     "clip-rule": "evenodd"
   })))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!isViewOptionsDropdownOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!isViewOptionsDropdownOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "view-button",
@@ -399,7 +399,7 @@ export default function MainCalendar({
     d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
     "clip-rule": "evenodd"
   })))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!isImportExportOptionsDropdownOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!isImportExportOptionsDropdownOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "import-export-button",
diff --git a/public/components/calendar/SearchEvents.js b/public/components/calendar/SearchEvents.js
index b431fc6..b4ede84 100644
--- a/public/components/calendar/SearchEvents.js
+++ b/public/components/calendar/SearchEvents.js
@@ -91,7 +91,7 @@ export default function SearchEvents({
   }) : null, areResultsVisible.value ? h("section", {
     class: "relative inline-block text-left ml-2 text-xs"
   }, h("section", {
-    class: `absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none`,
+    class: `absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "view-button",
diff --git a/public/components/contacts/Contacts.js b/public/components/contacts/Contacts.js
index 79956d0..6d87aca 100644
--- a/public/components/contacts/Contacts.js
+++ b/public/components/contacts/Contacts.js
@@ -278,7 +278,7 @@ export default function Contacts({
     d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
     "clip-rule": "evenodd"
   })))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-slate-600 rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!isAddressBooksDropdownOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right divide-y divide-slate-600 rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!isAddressBooksDropdownOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "select-address-book-button",
@@ -318,7 +318,7 @@ export default function Contacts({
     d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
     "clip-rule": "evenodd"
   })))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!isOptionsDropdownOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!isOptionsDropdownOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "import-export-button",
diff --git a/public/components/expenses/MainExpenses.js b/public/components/expenses/MainExpenses.js
index 49dded8..222bc1a 100644
--- a/public/components/expenses/MainExpenses.js
+++ b/public/components/expenses/MainExpenses.js
@@ -538,7 +538,7 @@ export default function MainExpenses({
     width: 20,
     height: 20
   }))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!areNewOptionsOption.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!areNewOptionsOption.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "new-button",
diff --git a/public/components/files/MainFiles.js b/public/components/files/MainFiles.js
index de71054..92540b7 100644
--- a/public/components/files/MainFiles.js
+++ b/public/components/files/MainFiles.js
@@ -543,7 +543,7 @@ export default function MainFiles({
     width: 20,
     height: 20
   }))), h("div", {
-    class: `absolute left-0 z-10 mt-2 w-44 origin-top-left rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!areBulkOptionsOpen.value ? 'hidden' : ''}`,
+    class: `absolute left-0 z-10 mt-2 w-44 origin-top-left rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!areBulkOptionsOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "bulk-button",
@@ -576,7 +576,7 @@ export default function MainFiles({
     width: 20,
     height: 20
   }))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!areNewOptionsOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!areNewOptionsOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "new-button",
diff --git a/public/components/files/SearchFiles.js b/public/components/files/SearchFiles.js
index 2560c59..2f866ea 100644
--- a/public/components/files/SearchFiles.js
+++ b/public/components/files/SearchFiles.js
@@ -90,7 +90,7 @@ export default function SearchFiles() {
   }) : null, areResultsVisible.value ? h("section", {
     class: "relative inline-block text-left ml-2 text-sm"
   }, h("section", {
-    class: `absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-slate-600 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none overflow-y-scroll max-h-[80%] min-h-56`,
+    class: `absolute right-0 z-10 mt-2 w-80 origin-top-right rounded-md bg-slate-600 shadow-lg ring-1 ring-black/15 focus:outline-none overflow-y-scroll max-h-[80%] min-h-56`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "view-button",
diff --git a/public/components/news/Articles.js b/public/components/news/Articles.js
index 35e595b..fb2bebe 100644
--- a/public/components/news/Articles.js
+++ b/public/components/news/Articles.js
@@ -144,7 +144,7 @@ export default function Articles({
     d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
     "clip-rule": "evenodd"
   })))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!isFilterDropdownOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!isFilterDropdownOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "filter-button",
diff --git a/public/components/news/Feeds.js b/public/components/news/Feeds.js
index dfb4e66..f069c52 100644
--- a/public/components/news/Feeds.js
+++ b/public/components/news/Feeds.js
@@ -192,7 +192,7 @@ export default function Feeds({
     d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
     "clip-rule": "evenodd"
   })))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!isOptionsDropdownOpen.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!isOptionsDropdownOpen.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "filter-button",
diff --git a/public/components/notes/MainNotes.js b/public/components/notes/MainNotes.js
index 3623060..c551a0e 100644
--- a/public/components/notes/MainNotes.js
+++ b/public/components/notes/MainNotes.js
@@ -186,7 +186,7 @@ export default function MainNotes({
     width: 20,
     height: 20
   }))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!areNewOptionsOption.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!areNewOptionsOption.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "new-button",
diff --git a/public/components/photos/MainPhotos.js b/public/components/photos/MainPhotos.js
index d9c0df6..bdb87a7 100644
--- a/public/components/photos/MainPhotos.js
+++ b/public/components/photos/MainPhotos.js
@@ -124,7 +124,7 @@ export default function MainPhotos({
     width: 20,
     height: 20
   }))), h("div", {
-    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black ring-opacity-15 focus:outline-none ${!areNewOptionsOption.value ? 'hidden' : ''}`,
+    class: `absolute right-0 z-10 mt-2 w-44 origin-top-right rounded-md bg-slate-700 shadow-lg ring-1 ring-black/15 focus:outline-none ${!areNewOptionsOption.value ? 'hidden' : ''}`,
     role: "menu",
     "aria-orientation": "vertical",
     "aria-labelledby": "new-button",
diff --git a/public/css/tailwind.css b/public/css/tailwind.css
index ddb9295..17be9df 100644
--- a/public/css/tailwind.css
+++ b/public/css/tailwind.css
@@ -1220,8 +1220,11 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-black {
-    --tw-ring-color: var(--color-black);
+  .ring-black\/15 {
+    --tw-ring-color: color-mix(in srgb, #000 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--color-black) 15%, transparent);
+    }
   }
   .ring-slate-800 {
     --tw-ring-color: var(--color-slate-800);