Fix some styles for mobile views

HolodexNet · Nov 19, 2023 · 3f75ad7 · 3f75ad7
1 parent c366694
commit 3f75ad7
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 16 deletions.
diff --git a/packages/react/.eslintrc.cjs b/packages/react/.eslintrc.cjs
@@ -14,12 +14,19 @@ module.exports = {
       whitelist: [
         "i\\-.+:?.+",
         // doesn't work see: [https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/284]
-        "@.+:?.+"
+        "@.+:?.+",
       ],
     },
   },
 
-  ignorePatterns: ["dist", ".eslintrc.cjs", "tailwind.config.js"],
+  ignorePatterns: [
+    "dist",
+    ".eslintrc.cjs",
+    "index.html",
+    "tailwind.config.js",
+    "postcss.config.js",
+    "uno.config.ts",
+  ],
 
   parser: "@typescript-eslint/parser",
   parserOptions: {

diff --git a/packages/react/index.html b/packages/react/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
+    />
     <title>Vite + React + TS</title>
   </head>
   <body>

diff --git a/packages/react/src/components/chat/ChatModal.tsx b/packages/react/src/components/chat/ChatModal.tsx
@@ -16,7 +16,7 @@ export function ChatModal({ tlOpen, chatOpen, ...data }: ChatModalProps) {
   return (
     <div
       className={cn(
-        "flex @screen-lg:hidden w-full bg-base rounded-t-lg",
+        "flex @screen-lg:hidden w-full bg-base rounded-t-lg will-change-transform",
         // use top-[...] and h-[...] for fixed chat modal
         // since container query disables fixed element on screen (cannot use bottom-0)
         // Top position: top padding (1rem) + video height ((100cqw - x padding) * 0.5625) + controlbar height (4rem?)

diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
@@ -41,19 +41,19 @@ export function Header({ id }: HeaderProps) {
         <div className="i-heroicons:bars-3 rounded-md p-3" />
       </Button>
       <div className="hidden grow md:flex" />
-      <SearchBar className="mt-3 max-w-lg self-start" />
+      <SearchBar className="max-w-lg" />
       <Button
         size="icon"
         variant="ghost"
-        className="-ml-3 p-0 text-base-9"
+        className="p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:magnifying-glass h-full text-xl" />
       </Button>
       <Button
         size="icon"
         variant="ghost"
-        className="p-0 text-base-9"
+        className="hidden p-0 text-base-9 md:flex"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:sun-20-solid h-full text-xl " />

diff --git a/packages/react/src/components/language/LanguagePicker.tsx b/packages/react/src/components/language/LanguagePicker.tsx
@@ -26,6 +26,7 @@ export const LanguageSelector = () => {
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          className="whitespace-nowrap"
           variant="outline"
           role="combobox"
           size="lg"

diff --git a/packages/react/src/components/layout/Frame.scss b/packages/react/src/components/layout/Frame.scss
@@ -76,6 +76,7 @@ $responsive-breakpoint: 768px;
 
   > main {
     grid-area: content;
+    max-width: 100dvw;
     // disabling for now so we can use position sticky
     // overflow-y: auto;
   }

diff --git a/packages/react/src/components/player/QueueList.tsx b/packages/react/src/components/player/QueueList.tsx
@@ -32,10 +32,14 @@ export function QueueList() {
         >
           <div className={open ? "i-heroicons:minus" : "i-heroicons:plus"} />
           {t("component.queue.title")}
+          <span className="ml-auto text-sm text-base-11">
+            {queue.findIndex(({ id }) => currentVideo?.id === id) + 1} /{" "}
+            {queue.length}
+          </span>
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="flex flex-col py-2">
+        <div className="flex max-h-[70vh] flex-col overflow-y-auto py-2 ">
           <div className="flex justify-between px-4 pb-2">
             <NewPlaylistDialog
               triggerElement={

diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx
@@ -78,7 +78,7 @@ export function Home() {
 
   const listCN = useMemo(
     () =>
-      cn({
+      cn("px-4 py-2 md:px-8", {
         "@container grid grid-cols-1 grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] gap-x-4 gap-y-6":
           cardSize === "lg",
         "@container grid grid-cols-2 grid-cols-[repeat(auto-fill,_minmax(200px,_1fr))] gap-x-2 gap-y-4":
@@ -107,12 +107,8 @@ export function Home() {
       <Helmet>
         <title>{currentOrg} - Holodex</title>
       </Helmet>
-      <Tabs
-        className="w-full p-4 md:px-8"
-        defaultValue={tab}
-        onValueChange={setTab}
-      >
-        <TabsList className="z-20 flex w-full justify-start overflow-x-auto overflow-y-hidden rounded-none bg-base-2">
+      <Tabs defaultValue={tab} onValueChange={setTab}>
+        <TabsList className="sticky top-0 z-20 flex h-fit max-w-full justify-start gap-2 overflow-x-auto bg-base-2 px-4 py-2 md:px-8">
           <TabsTrigger className="text-lg" value="live">
             <Trans
               i18nKey="views.home.liveOrUpcomingHeading"

diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
@@ -79,7 +79,7 @@ export default function Watch() {
         q.some((v) => v.id === id)
           ? q
           : q.toSpliced(
-              q.findIndex((q) => q.id === currentVideo?.id),
+              q.findIndex((q) => q.id === currentVideo?.id) + 1,
               0,
               videoPlaceholder,
             ),