Update some css settings of side navigation.

OpenMOSS · Jul 28, 2024 · 5eef3ce · 5eef3ce
1 parent d20a3e7
commit 5eef3ce
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 8 deletions.
diff --git a/ui/src/components/app/sidenav.tsx b/ui/src/components/app/sidenav.tsx
@@ -38,14 +38,14 @@ export const SideNav = ({logitsExist}: {logitsExist:boolean}) => {
   }, );
 
   return (
-      <Card className="side-nav">
-        <CardHeader>
-          <CardTitle className="flex justify-between items-center text-base">
+      <Card className="side-nav py-4">
+        <CardHeader className="p-0">
+          <CardTitle className="flex justify-between items-center text-xs p-2">
             <span className="font-bold">CONTENTS</span>
           </CardTitle>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col">
             <ul >
               {idList.map((item) => (
                 <li key={item} style={{ position: 'relative', marginBottom: '10px' }}>

diff --git a/ui/src/globals.css b/ui/src/globals.css
@@ -84,9 +84,8 @@ html {
   position: fixed;
   right: 0;
   top: 0;
-  width: 125px;
+  width: 80px;
   height: 100%;
   background-color: #f4f4f4;
-  /* padding: 10px; */
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
 }
diff --git a/ui/src/routes/features/page.tsx b/ui/src/routes/features/page.tsx
@@ -89,11 +89,11 @@ export const FeaturesPage = () => {
   }, [dictionariesState.value]);
 
   return (
-    <div>
+    <div id="Top">
       <AppNavbar />
       <SideNav logitsExist={(featureState.value && featureState.value.logits != null) ?? false}/>
       <div className="pt-4 pb-20 px-20 flex flex-col items-center gap-12">
-        <div id="Top" className="container grid grid-cols-[auto_600px_auto_auto] justify-center items-center gap-4">
+        <div className="container grid grid-cols-[auto_600px_auto_auto] justify-center items-center gap-4">
           <span className="font-bold justify-self-end">Select dictionary:</span>
           <Select
             disabled={dictionariesState.loading || featureState.loading}