Cleans up the mobile styling. Adds tabs

This commit is contained in:
2025-06-13 11:54:23 -07:00
parent 9c607ba41a
commit 293e1f9f62
6 changed files with 44 additions and 23 deletions

View File

@@ -63,7 +63,7 @@ export function AutoSaveTextarea({
<textarea
value={value}
onChange={handleChange}
className={`w-full min-h-[4rem] p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
className={`w-full min-h-[6em] field-sizing-content p-2 rounded border bg-slate-800 text-slate-100 border-slate-700 focus:outline-none focus:ring-2 focus:ring-violet-500 transition-colors ${flash ? "ring-2 ring-emerald-400 border-emerald-400 bg-emerald-950" : ""} ${className}`}
{...props}
/>
) : (

View File

@@ -40,11 +40,11 @@ export function DocumentList<T extends Document>({
return (
<section className="w-full max-w-2xl mx-auto">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-between my-4">
<h2 className="text-xl font-bold text-slate-100">{title}</h2>
<button
type="button"
className="inline-flex items-center justify-center rounded-full bg-violet-600 hover:bg-violet-700 text-white w-9 h-9 focus:outline-none focus:ring-2 focus:ring-violet-400"
className="inline-flex items-center justify-center rounded-full bg-violet-600 hover:bg-violet-700 text-white w-8 h-8 focus:outline-none focus:ring-2 focus:ring-violet-400"
aria-label="Add new item"
onClick={() => setOpen(true)}
>

View File

@@ -5,6 +5,7 @@ import { useState } from "react";
import { Loader } from "./Loader";
import { NewRelatedDocumentForm } from "./documents/NewRelatedDocumentForm";
import { DocumentRow } from "./documents/DocumentRow";
import { displayName } from "@/lib/relationships";
interface RelationshipListProps {
root: Document;
@@ -61,9 +62,7 @@ export function RelationshipList({
return (
<DocumentList
title={
relationshipType.charAt(0).toUpperCase() + relationshipType.slice(1)
}
title={displayName(relationshipType)}
items={items}
error={error}
renderRow={(document) => <DocumentRow document={document} />}