CSS for questions list, new, edit

tzyian · tzyian · commit 3c3c46c553af · 2024-11-07T18:04:03.000+08:00
diff --git a/peerprep/app/layout.tsx b/peerprep/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Navbar from "@/components/navbar/Navbar";
-
 import ThemeProvider from "./theme-provider";
 
 export const metadata: Metadata = {
@@ -19,7 +18,7 @@ export default function RootLayout({
       <body>
         <ThemeProvider>
           <Navbar />
-          <main className="flex-grow overflow-y-auto">{children}</main>
+          <main className="flex-1 overflow-y-auto p-4">{children}</main>
         </ThemeProvider>
       </body>
     </html>
diff --git a/peerprep/app/questions/QuestionForm.tsx b/peerprep/app/questions/QuestionForm.tsx
@@ -124,7 +124,12 @@ const QuestionForm = ({ form, onSubmit }: QuestionFormProps) => {
             </FormItem>
           )}
         />
-        <Button type="submit">Submit</Button>
+        <Button
+          type="submit"
+          className={"border-blue-800 bg-blue-700 text-white hover:bg-blue-800"}
+        >
+          Submit
+        </Button>
       </form>
     </Form>
   );
diff --git a/peerprep/app/questions/edit/[question]/EditQuestion.tsx b/peerprep/app/questions/edit/[question]/EditQuestion.tsx
@@ -40,8 +40,8 @@ const EditQuestion = ({ question }: { question: Question }) => {
   };
 
   return (
-    <div className="flex h-screen items-center justify-center">
-      <div className="flex w-2/3 max-w-xl flex-col content-center">
+    <div className="flex h-screen justify-center">
+      <div className="w-2/3">
         <QuestionForm form={form} onSubmit={onSubmit} />
       </div>
     </div>
diff --git a/peerprep/app/questions/new/page.tsx b/peerprep/app/questions/new/page.tsx
@@ -36,8 +36,8 @@ const NewQuestion = () => {
   };
 
   return (
-    <div className="flex h-screen items-center justify-center">
-      <div className="flex w-2/3 max-w-xl flex-col content-center">
+    <div className="flex h-screen justify-center">
+      <div className="w-2/3">
         <QuestionForm form={form} onSubmit={onSubmit} />
       </div>
     </div>
diff --git a/peerprep/app/questions/page.tsx b/peerprep/app/questions/page.tsx
@@ -24,9 +24,7 @@ async function QuestionsPage() {
     <UserInfoProvider userData={userData}>
       <QuestionFilterProvider>
         <div className="flex h-screen flex-col overflow-hidden">
-          <div className="sticky top-0">
-            <Matchmaking />
-          </div>
+          <Matchmaking />
           <div className="flex-grow overflow-y-auto">
             <QuestionList questions={questions as unknown as Question[]} />
           </div>
diff --git a/peerprep/components/modifyQuestion/Tiptap.tsx b/peerprep/components/modifyQuestion/Tiptap.tsx
@@ -36,13 +36,15 @@ const Tiptap = ({ defaultContent, onChange }: TipTapProps) => {
   });
 
   return (
-    <div className="flex min-h-80 flex-col">
+    <div className="flex flex-col">
       <MenuBar editor={editor} />
 
-      <EditorContent
-        editor={editor}
-        className="flex h-full flex-1 resize-y flex-col overflow-y-auto overflow-x-hidden rounded-md border bg-[#121212] p-2"
-      />
+      <div className="h-80 resize-y">
+        <EditorContent
+          editor={editor}
+          className="h-full flex-1 overflow-y-auto rounded-md border bg-[#121212] p-2"
+        />
+      </div>
     </div>
   );
 };
diff --git a/peerprep/components/ui/tags.tsx b/peerprep/components/ui/tags.tsx
@@ -42,7 +42,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
       <div
         className={cn(
           // caveat: :has() variant requires tailwind v3.4 or above: https://tailwindcss.com/blog/tailwindcss-v3-4#new-has-variant
-          "flex min-h-10 w-full flex-wrap gap-2 rounded-md border border-black px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50 has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-neutral-950 has-[:focus-visible]:ring-offset-2",
+          "flex min-h-10 w-full flex-wrap gap-2 rounded-md border border-white px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50 has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-neutral-950 has-[:focus-visible]:ring-offset-2",
           className,
         )}
       >
diff --git a/peerprep/style/tiptap.css b/peerprep/style/tiptap.css
@@ -1,5 +1,7 @@
 .ProseMirror {
     flex: 1;
+    height: 100%;
+    max-height: 100%;
 }
 
 .tiptap {

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(`
`42`	`42`	`<div`
`43`	`43`	`className={cn(`
`44`	`44`	`// caveat: :has() variant requires tailwind v3.4 or above: https://tailwindcss.com/blog/tailwindcss-v3-4#new-has-variant`
`45`		`- "flex min-h-10 w-full flex-wrap gap-2 rounded-md border border-black px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50 has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-neutral-950 has-[:focus-visible]:ring-offset-2",`
	`45`	`+ "flex min-h-10 w-full flex-wrap gap-2 rounded-md border border-white px-3 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50 has-[:focus-visible]:outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-neutral-950 has-[:focus-visible]:ring-offset-2",`
`46`	`46`	`className,`
`47`	`47`	`)}`
`48`	`48`	`>`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`.ProseMirror {`
`2`	`2`	`flex: 1;`
	`3`	`+ height: 100%;`
	`4`	`+ max-height: 100%;`
`3`	`5`	`}`
`4`	`6`
`5`	`7`	`.tiptap {`