Merge pull request #39 from mpc-ou/issue-33

style: fix ui

Author: holedev

assets/globals.css

@@ -120,4 +120,10 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  /* Prevent Radix from locking scroll and shifting layout */
+  body[data-scroll-locked] {
+    overflow: visible !important;
+    margin-right: 0 !important;
+  }
 }

entrypoints/popup/InfoTab/index.tsx

@@ -1,5 +1,5 @@
 import { CircleAlertIcon, CircleCheckIcon, FileOutputIcon, ImportIcon } from "lucide-react";
-import { Activity, useEffect, useLayoutEffect } from "react";
+import { Activity, useLayoutEffect } from "react";
 import { toast } from "sonner";
 import { ButtonNavSite } from "@/components/custom/button-nav-site";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -58,10 +58,6 @@ const InfoTab = () => {
     loadData();
   }, [getData]);
 
-  useEffect(() => {
-    console.info("[index.tsx:56] ", siteCurrURL);
-  }, [siteCurrURL]);
-
   return (
     <section>
       <Alert className='m-0 border-none p-0'>

entrypoints/popup/PointTab/form-semester-dialog.tsx

@@ -15,17 +15,11 @@ type Props = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSubmit: (semesterName: string) => void;
-  initialValue?: string;
+  initialValue: string;
   mode?: "add" | "edit";
 };
 
-export const FormSemesterDialog = ({
-  open,
-  onOpenChange,
-  onSubmit,
-  initialValue = "Học kỳ mới",
-  mode = "add"
-}: Props) => {
+export const FormSemesterDialog = ({ open, onOpenChange, onSubmit, initialValue, mode = "add" }: Props) => {
   const [semesterName, setSemesterName] = useState(initialValue);
 
   useEffect(() => {
@@ -35,7 +29,11 @@ export const FormSemesterDialog = ({
   }, [open, initialValue]);
 
   const handleSubmit = () => {
-    onSubmit(semesterName);
+    const trimmedName = semesterName.trim();
+    if (!trimmedName) {
+      return;
+    }
+    onSubmit(trimmedName);
     setSemesterName("Học kỳ mới");
   };
 

entrypoints/popup/PointTab/index.tsx

@@ -23,6 +23,7 @@ import {
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
 import { _GET_POINT_DATA } from "@/constants/chrome";
 import { _DEFAULT_SITE_URL_MAPPING } from "@/constants/default";
 import { _DEFAULT_SCORE_SUMMARY } from "@/entrypoints/popup/PointTab/default";
@@ -307,7 +308,9 @@ const PointTab = () => {
           </div>
         </div>
 
-        <div className='space-y-3 px-4 pb-4'>
+        <Separator className='mx-auto mb-4 max-w-[95%]' />
+
+        <div className='space-y-4 px-4 pb-4'>
           <div className='flex items-center gap-2'>
             <Input
               className='flex-1'
@@ -327,7 +330,8 @@ const PointTab = () => {
                 Chỉ GPA
               </Label>
             </div>
-
+          </div>
+          <div className='flex justify-end'>
             <Button onClick={() => setSemesterDialog({ open: true, mode: "add" })} size='sm' variant='outline'>
               <PlusIcon className='mr-2 h-4 w-4' />
               Thêm học kỳ
@@ -350,8 +354,8 @@ const PointTab = () => {
       <FormSemesterDialog
         initialValue={
           semesterDialog.mode === "edit" && semesterDialog.semesterIdx !== undefined
-            ? scores[semesterDialog.semesterIdx]?.title
-            : undefined
+            ? scores[semesterDialog.semesterIdx]?.title || ""
+            : "Học kỳ mới"
         }
         mode={semesterDialog.mode}
         onOpenChange={(open) => setSemesterDialog({ ...semesterDialog, open })}