[FrontEnd]: fix dropdown design

1 files changed, 7 insertions, 3 deletions

diff --git a/youtube/static/comments.css b/youtube/static/comments.css
index 19ba373..aa279ef 100644
--- a/youtube/static/comments.css
+++ b/youtube/static/comments.css
@@ -107,9 +107,7 @@ header {
         "dropdown-label"
         "dropdown-content";
     grid-area: dropdown;
-    background: var(--background);
     padding-right: 4rem;
-    z-index: 1;
 }
 .dropdown-label {
     grid-area: dropdown-label;
@@ -274,7 +272,7 @@ label[for=options-toggle-cbox] {
     .dropdown {
         display: grid;
         grid-gap: 1px;
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
         grid-template-areas:
             "dropdown-label"
             "dropdown-content";
@@ -282,6 +280,12 @@ label[for=options-toggle-cbox] {
         z-index: 1;
         position: absolute;
     }
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow-y: scroll;
+    }
 
     .footer {
         display: grid;