[FrontEnd]: fix dropdown design

1 files changed, 12 insertions, 3 deletions

diff --git a/youtube/static/channel.css b/youtube/static/channel.css
index fee15b3..3742418 100644
--- a/youtube/static/channel.css
+++ b/youtube/static/channel.css
@@ -202,8 +202,10 @@ label[for=options-toggle-cbox] {
 }
 
 #options-toggle-cbox:checked ~ .dropdown-content {
-    display: inline-grid;
+    display: block;
     white-space: nowrap;
+    background: var(--secondary-background);
+    padding: 0.5rem 1rem;
 }
 /*- ----------- End Menu Mobile sin JS ------------- */
 
@@ -506,7 +508,7 @@ hr {
     .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";
@@ -517,6 +519,13 @@ hr {
         position: absolute;
     }
 
+    #options-toggle-cbox:checked ~ .dropdown-content {
+        padding: 0rem 3rem 1rem 1rem;
+        width: 100%;
+        max-height: 45vh;
+        overflow: hidden;
+    }
+
     .author-container {
         max-width: 50vw;
     }
@@ -530,7 +539,7 @@ hr {
         grid-area: playlist;
     }
     .play-clean {
-        grid-template-columns: minmax(50px, 100px);
+        grid-template-columns: minmax(50px, 120px);
     }
     .play-clean > button {
         padding-left: 0px;