Fix YouTube Clone UI: sidebar alignment, spacing, and overflow issues (#938)

Author: aayush105

YoutubeClone/styles/style.css

@@ -4,7 +4,6 @@ p {
 }
 
 body {
-   
   font-family: Roboto, Arial;
   margin: 0;
   padding-top: 80px;
@@ -13,8 +12,8 @@ body {
   background-color: rgb(240, 240, 240);
 }
 
-@media (min-width: 1200px){
-  body{
+@media (min-width: 1200px) {
+  body {
     padding-left: 171px;
   }
 }
@@ -83,17 +82,22 @@ body {
   margin-right: 10px;
 }
 
-.search-button, .voice-search-button, .upload-icon-container, 
-.youtube-app-icon-container, .notifications-icon-container{
+.search-button,
+.voice-search-button,
+.upload-icon-container,
+.youtube-app-icon-container,
+.notifications-icon-container {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.search-button .tooltip, .voice-search-button .tooltip, 
-.upload-icon-container .tooltip, .youtube-app-icon-container .tooltip,
-.notifications-icon-container .tooltip{
+.search-button .tooltip,
+.voice-search-button .tooltip,
+.upload-icon-container .tooltip,
+.youtube-app-icon-container .tooltip,
+.notifications-icon-container .tooltip {
   position: absolute;
   background-color: gray;
   color: white;
@@ -107,9 +111,11 @@ body {
   white-space: nowrap;
 }
 
-.search-button:hover .tooltip, .voice-search-button:hover .tooltip,
-.upload-icon-container:hover .tooltip, .youtube-app-icon-container:hover 
-.tooltip, .notifications-icon-container:hover .tooltip{
+.search-button:hover .tooltip,
+.voice-search-button:hover .tooltip,
+.upload-icon-container:hover .tooltip,
+.youtube-app-icon-container:hover .tooltip,
+.notifications-icon-container:hover .tooltip {
   opacity: 1;
 }
 
@@ -138,19 +144,19 @@ body {
   flex-shrink: 0;
 }
 
-.upload-icon{
+.upload-icon {
   height: 24px;
 }
 
-.youtube-app-icon{
+.youtube-app-icon {
   height: 24px;
 }
 
-.notifications-icon{
+.notifications-icon {
   height: 24px;
 }
 
-.notifications-count{
+.notifications-count {
   position: absolute;
   top: -2px;
   right: -5px;
@@ -161,72 +167,79 @@ body {
   border-radius: 10px;
 }
 
-.current-user-picture{
+.current-user-picture {
   height: 28px;
   border-radius: 16px;
   width: 26px;
 }
-.sidebar{
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    top: 55px;
-    width: 75px;
-    background-color: white;
-    z-index: 200;
-    padding-top: 5px;
+.sidebar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  top: 56px;
+  width: 72px;
+  background-color: white;
+  z-index: 200;
+  padding-top: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
 }
 
-
 @media (min-width: 1200px) {
-    .sidebar{
-        width: 150px;
-    }
+  .sidebar {
+    width: 150px;
+    align-items: flex-start;
+    padding-left: 20px;
   }
+}
 
-.sidebar-link{
-    padding-top: 10px;    
-    padding-bottom: 10px; 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    cursor: pointer;
+.sidebar-link {
+  padding-top: 10px;
+  /* padding-bottom: 10px;  */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+  width: 100%;
+  transition: background-color 0.2s;
 }
 
-@media (min-width: 1201px){
-   .sidebar-link {
-        height: auto;
-        padding: 10px 0;
-        flex-direction: row;
-        justify-content: flex-start; 
-        align-items: center; 
-        margin-left: 0; 
-        margin-right: 0; 
-        padding-left: 20px;
-        gap: 20px; 
-    }
+@media (min-width: 1201px) {
+  .sidebar-link {
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 20px;
+    padding-bottom: 10px;
+  }
+  .sidebar-link div {
+    font-size: 18px;
+  }
 }
-.sidebar-link:hover{
-    background-color: rgb(235, 235, 235);
+.sidebar-link:hover {
+  background-color: #f0f0f0;
 }
 
-.sidebar-link img{
-    height: 24px;   
-    margin-bottom: 0px; 
-    margin-top: 2rem;
+.sidebar-link img {
+  height: 24px;
+  margin-bottom: 6px;
+  /* margin-top: 2rem; */
 }
 
-.sidebar-link div{
-    font-size: 12px;
-    margin-top: 2rem; 
+.sidebar-link div {
+  font-size: 12px;
+  /* margin-top: 2rem;  */
+  text-align: center;
+  color: #0f0f0f;
 }
 
 .thumbnail {
   width: 100%;
 }
 
-.video-link{
+.video-link {
   color: black;
 }
 .video-title {
@@ -242,7 +255,8 @@ body {
     font-size: 16px;
     line-height: 24px;
   }
-  .video-author, .video-stats{
+  .video-author,
+  .video-stats {
     font-size: 14px;
   }
 }
@@ -307,4 +321,4 @@ body {
   position: absolute;
   bottom: 8px;
   right: 5px;
-}
+}