fix badge css

coaidev · Oct 25, 2023 · 8f600d5 · 8f600d5
1 parent 9c9d1cc
commit 8f600d5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/app/src/assets/ui.less b/app/src/assets/ui.less
@@ -38,7 +38,7 @@
       border-color: hsl(var(--border-hover));
       color: hsl(var(--background));
 
-      .badge {
+      .select-element.badge {
         &.badge-default {
           background: hsl(var(--background)) !important;
           color: hsl(var(--text));
@@ -49,25 +49,25 @@
         }
       }
     }
+  }
+}
 
-    .badge {
-      user-select: none;
-      transition: .2s;
-      padding-left: 0.45rem;
-      padding-right: 0.45rem;
-
-      &.badge-default {
-        background: hsl(var(--primary)) !important;
+.select-element.badge {
+  user-select: none;
+  transition: .2s;
+  padding-left: 0.45rem;
+  padding-right: 0.45rem;
 
-        &:hover {
-          background: hsl(var(--primary)) !important;
-        }
-      }
+  &.badge-default {
+    background: hsl(var(--primary)) !important;
 
-      &.badge-gold {
-        color: rgb(164, 128, 0) !important;
-        background: rgb(255, 231, 145) !important;
-      }
+    &:hover {
+      background: hsl(var(--primary)) !important;
     }
   }
+
+  &.badge-gold {
+    color: rgb(164, 128, 0) !important;
+    background: rgb(255, 231, 145) !important;
+  }
 }
diff --git a/app/src/components/SelectGroup.tsx b/app/src/components/SelectGroup.tsx
@@ -33,7 +33,7 @@ function GroupSelectItem(props: SelectItemProps) {
     <>
       {props.value}
       {props.badge && (
-        <Badge className={`badge ml-1 badge-${props.badge.variant}`}>
+        <Badge className={`select-element badge ml-1 badge-${props.badge.variant}`}>
           {props.badge.name}
         </Badge>
       )}

diff --git a/app/src/utils.ts b/app/src/utils.ts
@@ -1,18 +1,20 @@
 import React, { useEffect } from "react";
 import { FileObject } from "./components/FileProvider.tsx";
 
-export let mobile =
-  window.innerWidth <= 468 ||
-  window.innerHeight <= 468 ||
-  navigator.userAgent.includes("Mobile");
+export let mobile = isMobile();
 
 window.addEventListener("resize", () => {
-  mobile =
-    window.innerWidth <= 468 ||
-    window.innerHeight <= 468 ||
-    navigator.userAgent.includes("Mobile");
+  mobile = isMobile();
 });
 
+export function isMobile(): boolean {
+  return (
+    (document.documentElement.clientWidth || window.innerWidth) <= 668 ||
+    (document.documentElement.clientHeight || window.innerHeight) <= 468 ||
+    navigator.userAgent.includes("Mobile")
+  );
+}
+
 export function useEffectAsync<T>(effect: () => Promise<T>, deps?: any[]) {
   return useEffect(() => {
     effect().catch((err) =>