Update media queries to modern syntax

Author: huangsam

ui/src/components/Sidebar.astro

@@ -366,7 +366,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     display: none;
   }
 
-  @media (max-width: 900px) {
+  @media (width <= 900px) {
     .sidebar {
       position: fixed;
       left: 0;

ui/src/pages/[lang]/[...path].astro

@@ -143,6 +143,12 @@ const activeLang = lang as keyof typeof languages;
     cursor: help;
   }
 
+  @media (width <= 480px) {
+    .annotation-badge {
+      display: none;
+    }
+  }
+
   .action-buttons {
     display: flex;
     gap: 0.75rem;
@@ -183,7 +189,7 @@ const activeLang = lang as keyof typeof languages;
     flex-shrink: 0;
   }
 
-  @media (max-width: 969px) {
+  @media (width <= 969px) {
     .btn-text,
     .btn-text-full,
     .btn-text-short {
@@ -250,7 +256,7 @@ const activeLang = lang as keyof typeof languages;
     color: #ffffff !important;
   }
 
-  @media (max-width: 900px) {
+  @media (width <= 900px) {
     /* Stack container vertically */
     #app-container {
       flex-direction: column !important;

ui/src/pages/[lang]/index.astro

@@ -221,7 +221,7 @@ const totalLessons = lessons.length;
     font-style: normal;
   }
 
-  @media (max-width: 900px) {
+  @media (width <= 900px) {
     #app-container {
       flex-direction: column !important;
     }