more mobile fixes
This commit is contained in:
10
src/app.css
10
src/app.css
@@ -536,7 +536,7 @@ a.hover-underline-animation:hover::after {
|
|||||||
position: relative;
|
position: relative;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 350px;
|
min-width: min(350px, 100%);
|
||||||
max-width: 100% !important;
|
max-width: 100% !important;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
@@ -732,8 +732,10 @@ a.hover-underline-animation:hover::after {
|
|||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
overflow: hidden;
|
overflow: auto;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiptap-table td,
|
.tiptap-table td,
|
||||||
@@ -765,8 +767,10 @@ a.hover-underline-animation:hover::after {
|
|||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
overflow: hidden;
|
overflow: auto;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ProseMirror table td,
|
.ProseMirror table td,
|
||||||
|
|||||||
@@ -255,12 +255,12 @@ export default function PostForm(props: PostFormProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="bg-base text-text min-h-screen py-32">
|
<div class="bg-base text-text min-h-screen overflow-x-hidden py-32">
|
||||||
<div class="text-center text-2xl tracking-wide">
|
<div class="text-center text-2xl tracking-wide">
|
||||||
{props.mode === "edit" ? "Edit a Blog" : "Create a Blog"}
|
{props.mode === "edit" ? "Edit a Blog" : "Create a Blog"}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex h-full w-full justify-center">
|
<div class="flex h-full w-full justify-center">
|
||||||
<form onSubmit={handleSubmit} class="px-4">
|
<form onSubmit={handleSubmit} class="w-full max-w-full px-4">
|
||||||
<div class="mx-auto w-full md:w-3/4 xl:w-1/2">
|
<div class="mx-auto w-full md:w-3/4 xl:w-1/2">
|
||||||
{/* Title */}
|
{/* Title */}
|
||||||
<div class="input-group mx-4">
|
<div class="input-group mx-4">
|
||||||
@@ -331,7 +331,7 @@ export default function PostForm(props: PostFormProps) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text Editor */}
|
{/* Text Editor */}
|
||||||
<div class="">
|
<div class="w-full max-w-full overflow-hidden">
|
||||||
<TextEditor updateContent={setBody} preSet={initialBody()} />
|
<TextEditor updateContent={setBody} preSet={initialBody()} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -648,7 +648,7 @@ export default function TextEditor(props: TextEditorProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="border-surface2 text-text w-full rounded-md border px-4 py-2">
|
<div class="border-surface2 text-text w-full max-w-full overflow-hidden rounded-md border px-4 py-2">
|
||||||
<Show when={editor()}>
|
<Show when={editor()}>
|
||||||
{(instance) => (
|
{(instance) => (
|
||||||
<>
|
<>
|
||||||
@@ -1264,7 +1264,7 @@ export default function TextEditor(props: TextEditorProps) {
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
ref={editorRef}
|
ref={editorRef}
|
||||||
class="prose prose-sm prose-invert sm:prose-base md:prose-xl lg:prose-xl xl:prose-2xl mx-auto h-[80dvh] min-w-full overflow-scroll focus:outline-none"
|
class="prose prose-sm prose-invert sm:prose-base md:prose-xl lg:prose-xl xl:prose-2xl mx-auto h-[80dvh] max-w-full overflow-scroll focus:outline-none"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user