fix(scrollbar): ui accessibility (#1736)

Qovery · Oct 25, 2024 · c2c2554 · c2c2554
1 parent 4c6e57b
commit c2c2554
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 15 deletions.
diff --git a/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx b/libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx
@@ -46,7 +46,7 @@ export function EnvironmentStages({
       </HeaderEnvironmentStages>
       <div className="flex h-[calc(100vh-120px)] justify-center border border-t-0 border-neutral-500 bg-neutral-600">
         <div className="h-full w-full">
-          <div className="flex gap-0.5 overflow-y-scroll py-6 pl-6 pr-4">
+          <div className="flex h-full gap-0.5 overflow-y-scroll py-6 pl-6 pr-4">
             {!deploymentStages ? (
               <div className="mt-6 flex h-full w-full justify-center">
                 <LoaderSpinner className="h-6 w-6" theme="dark" />

diff --git a/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx b/libs/domains/service-logs/feature/src/lib/header-logs/header-logs.tsx
@@ -54,19 +54,21 @@ export function HeaderLogs({
         <div className="flex h-full items-center gap-4 border-t border-neutral-500 bg-neutral-600 py-2.5 pl-4 pr-0.5 text-sm font-medium text-neutral-50">
           {type === 'DEPLOYMENT' && (
             <>
-              <Link
-                as="button"
-                size="sm"
-                variant="surface"
-                color="neutral"
-                className="w-7 justify-center"
-                to={
-                  ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
-                  ENVIRONMENT_STAGES_URL(versionId)
-                }
-              >
-                <Icon iconName="timeline" />
-              </Link>
+              <Tooltip content="Environment stages">
+                <Link
+                  as="button"
+                  size="sm"
+                  variant="surface"
+                  color="neutral"
+                  className="w-7 justify-center"
+                  to={
+                    ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
+                    ENVIRONMENT_STAGES_URL(versionId)
+                  }
+                >
+                  <Icon iconName="timeline" />
+                </Link>
+              </Tooltip>
               <span className="text-neutral-400">/</span>
             </>
           )}

diff --git a/libs/pages/layout/src/lib/feature/dark-mode-enabler/dark-mode-enabler.tsx b/libs/pages/layout/src/lib/feature/dark-mode-enabler/dark-mode-enabler.tsx
@@ -26,6 +26,15 @@ export function DarkModeEnabler(props: DarkModeEnablerProps) {
   }
 
   useEffect(() => {
+    // Handle meta tag for color scheme
+    let metaColorScheme = document.querySelector('meta[name="color-scheme"]')
+    if (!metaColorScheme) {
+      metaColorScheme = document.createElement('meta')
+      metaColorScheme.setAttribute('name', 'color-scheme')
+      document.head.appendChild(metaColorScheme)
+    }
+    metaColorScheme.setAttribute('content', isDarkMode ? 'dark' : 'light')
+
     if (isDarkMode) {
       document.documentElement.classList.add('dark')
       hideElementTransitionDuringNavigation()

diff --git a/...ogs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.tsx b/...ogs/environment/src/lib/feature/environment-stages-feature/environment-stages-feature.tsx
@@ -115,7 +115,7 @@ export function EnvironmentStagesFeature({
                         .otherwise(() => null)}
                     </div>
                   </div>
-                  <div className="flex max-h-[75vh] flex-col gap-1.5 overflow-x-hidden overflow-y-scroll bg-neutral-800 p-1.5">
+                  <div className="flex flex-col gap-1.5 bg-neutral-800 p-1.5">
                     {s.services.length > 0 ? (
                       s.services.map((service) => {
                         const fullService = getServiceById(service.id!)

diff --git a/libs/shared/ui/src/lib/styles/main.scss b/libs/shared/ui/src/lib/styles/main.scss
@@ -28,9 +28,14 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   background: theme('colors.neutral.200');
+  text-rendering: optimizelegibility;
   min-height: 100vh;
 
   main:not(.h-screen, .layout-onboarding) {
     height: calc(100vh - theme('spacing.16'));
   }
 }
+
+* {
+  scrollbar-width: thin;
+}