From 0c20460c1315f72c7dc20e0fd25f09355d4e677f Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Thu, 20 Jul 2023 20:48:02 -0700
Subject: [PATCH] /new page responsiveness

---
 .eslintrc.json                                   |  8 +++++++-
 .../(posts)/components/document-tabs/index.tsx   | 16 ++++++++++++----
 src/app/(drift)/(posts)/new/components/new.tsx   |  6 +++---
 src/app/components/date-picker.tsx               |  2 +-
 src/app/components/layout/index.tsx              |  2 +-
 5 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 26d4bd55..949a80a0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,12 @@
 {
 	"extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-	"ignorePatterns": ["node_modules/", "__tests__/"],
+	"ignorePatterns": [
+		"node_modules/",
+		"__tests__/",
+		"coverage/",
+		".next/",
+		"public"
+	],
 	"rules": {
 		"@typescript-eslint/no-unused-vars": "error",
 		"@typescript-eslint/no-explicit-any": "error"
diff --git a/src/app/(drift)/(posts)/components/document-tabs/index.tsx b/src/app/(drift)/(posts)/components/document-tabs/index.tsx
index 1a7a8bd4..c810d863 100644
--- a/src/app/(drift)/(posts)/components/document-tabs/index.tsx
+++ b/src/app/(drift)/(posts)/components/document-tabs/index.tsx
@@ -42,11 +42,9 @@ export default function DocumentTabs({
 		setActiveTab(newTab as "preview" | "edit")
 	}
 
-	const formattingIconsVisibilityClass =
-		activeTab === "preview" ? "hidden" : "block"
 	return (
 		<Tabs {...props} onValueChange={handleTabChange} defaultValue={defaultTab}>
-			<TabsList className="flex justify-between">
+			<TabsList className="flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-between">
 				<div>
 					<TabsTrigger value="edit">{isEditing ? "Edit" : "Raw"}</TabsTrigger>
 					<TabsTrigger value="preview">
@@ -56,7 +54,9 @@ export default function DocumentTabs({
 				{isEditing && (
 					<FormattingIcons
 						textareaRef={codeEditorRef}
-						className={`ml-auto ${formattingIconsVisibilityClass}`}
+						className={`ml-auto ${
+							activeTab === "preview" ? "hidden" : "hidden sm:block"
+						}`}
 					/>
 				)}
 			</TabsList>
@@ -68,6 +68,14 @@ export default function DocumentTabs({
 						flexDirection: "column"
 					}}
 				>
+					<FormattingIcons
+						textareaRef={codeEditorRef}
+						className={`ml-auto ${
+							activeTab === "preview"
+								? "hidden"
+								: "block text-muted-foreground sm:hidden"
+						}`}
+					/>
 					<TextareaMarkdown.Wrapper ref={codeEditorRef}>
 						<Textarea
 							readOnly={!isEditing}
diff --git a/src/app/(drift)/(posts)/new/components/new.tsx b/src/app/(drift)/(posts)/new/components/new.tsx
index 4a1b5bfd..53f3ac30 100644
--- a/src/app/(drift)/(posts)/new/components/new.tsx
+++ b/src/app/(drift)/(posts)/new/components/new.tsx
@@ -33,7 +33,7 @@ const DatePicker = dynamic(
 					"text-muted-foreground"
 				)}
 			>
-				<CalendarIcon className="mr-2 h-4 w-4" />
+				<CalendarIcon className="w-4 h-4 mr-2" />
 				<span>Won&apos;t expire</span>
 			</Button>
 		)
@@ -255,7 +255,7 @@ function Post({
 	}
 
 	return (
-		<div className="flex flex-1 flex-col gap-4">
+		<div className="flex flex-col flex-1 gap-4">
 			<Title title={title} onChange={onChangeTitle} className="py-4" />
 			{/* <Description description={description} onChange={onChangeDescription} /> */}
 			<EditDocumentList
@@ -267,7 +267,7 @@ function Post({
 			/>
 			<FileDropzone setDocs={uploadDocs} />
 
-			<div className="mt-4 flex items-center justify-between">
+			<div className="flex flex-col items-end justify-between gap-4 mt-4 sm:flex-row sm:items-center">
 				<span className="flex flex-1 gap-2">
 					<Button
 						onClick={() => {
diff --git a/src/app/components/date-picker.tsx b/src/app/components/date-picker.tsx
index 5b10a27a..09a57e5d 100644
--- a/src/app/components/date-picker.tsx
+++ b/src/app/components/date-picker.tsx
@@ -26,7 +26,7 @@ export function DatePicker({
 						!expiresAt && "text-muted-foreground"
 					)}
 				>
-					<CalendarIcon className="mr-2 h-4 w-4" />
+					<CalendarIcon className="w-4 h-4 mr-2" />
 					{expiresAt ? (
 						format(expiresAt, "PPP")
 					) : (
diff --git a/src/app/components/layout/index.tsx b/src/app/components/layout/index.tsx
index bbec11e3..1c4cb560 100644
--- a/src/app/components/layout/index.tsx
+++ b/src/app/components/layout/index.tsx
@@ -15,7 +15,7 @@ export default function Layout({
 		<div className={clsx(styles.page, forSites && styles.forSites)}>
 			<div className="flex flex-col justify-between h-screen">
 				<div> {children}</div>
-				<footer className="h-16 py-4 text-sm text-center text-gray-500">
+				<footer className="mx-auto h-4 max-w-[var(--main-content)] text-center text-sm text-gray-500">
 					<p>
 						Drift is an open source project by{" "}
 						<Link colored href="https://twitter.com/Max_Leiter">