fix mobile

kitsune-fe/playwright.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
 	webServer: {
-		command: 'npm run build && npm run preview',
+		command: 'pnpm run build && pnpm run preview',
 		port: 4173
 	},
 

kitsune-fe/schema.graphql

@@ -1,6 +1,6 @@
 schema {
-  query: RootQuery
-  mutation: RootMutation
+	query: RootQuery
+	mutation: RootMutation
 }
 
 """
@@ -10,27 +10,27 @@ Indicates that an Input Object is a OneOf Input Object (and thus requires
 directive @oneOf on INPUT_OBJECT
 
 type Account {
-  avatar: MediaAttachment
-  createdAt: DateTime!
-  displayName: String
-  header: MediaAttachment
-  id: UUID!
-  locked: Boolean!
-  note: String
-  posts(after: String, before: String, first: Int, last: Int): PostConnection!
-  updatedAt: DateTime!
-  url: String!
-  username: String!
+	avatar: MediaAttachment
+	createdAt: DateTime!
+	displayName: String
+	header: MediaAttachment
+	id: UUID!
+	locked: Boolean!
+	note: String
+	posts(after: String, before: String, first: Int, last: Int): PostConnection!
+	updatedAt: DateTime!
+	url: String!
+	username: String!
 }
 
 enum CaptchaBackend {
-  H_CAPTCHA
-  M_CAPTCHA
+	H_CAPTCHA
+	M_CAPTCHA
 }
 
 type CaptchaInfo {
-  backend: CaptchaBackend!
-  key: String!
+	backend: CaptchaBackend!
+	key: String!
 }
 
 """
@@ -44,99 +44,133 @@ format, but it is always normalized to the UTC (Z) offset, e.g.
 scalar DateTime
 
 type Instance {
-  captcha: CaptchaInfo
-  characterLimit: Int!
-  description: String!
-  domain: String!
-  localPostCount: Int!
-  name: String!
-  registrationsOpen: Boolean!
-  userCount: Int!
-  version: String!
+	captcha: CaptchaInfo
+	characterLimit: Int!
+	description: String!
+	domain: String!
+	localPostCount: Int!
+	name: String!
+	registrationsOpen: Boolean!
+	userCount: Int!
+	version: String!
 }
 
 type MediaAttachment {
-  blurhash: String
-  contentType: String!
-  createdAt: DateTime!
-  description: String
-  id: UUID!
-  uploader: Account!
-  url: String!
+	blurhash: String
+	contentType: String!
+	createdAt: DateTime!
+	description: String
+	id: UUID!
+	uploader: Account!
+	url: String!
 }
 
 type OAuth2Application {
-  createdAt: DateTime!
-  id: UUID!
-  name: String!
-  redirectUri: String!
-  secret: String!
-  updatedAt: DateTime!
+	createdAt: DateTime!
+	id: UUID!
+	name: String!
+	redirectUri: String!
+	secret: String!
+	updatedAt: DateTime!
 }
 
-"""Information about pagination in a connection"""
+"""
+Information about pagination in a connection
+"""
 type PageInfo {
-  """When paginating forwards, the cursor to continue."""
-  endCursor: String
-
-  """When paginating forwards, are there more items?"""
-  hasNextPage: Boolean!
-
-  """When paginating backwards, are there more items?"""
-  hasPreviousPage: Boolean!
-
-  """When paginating backwards, the cursor to continue."""
-  startCursor: String
+	"""
+	When paginating forwards, the cursor to continue.
+	"""
+	endCursor: String
+
+	"""
+	When paginating forwards, are there more items?
+	"""
+	hasNextPage: Boolean!
+
+	"""
+	When paginating backwards, are there more items?
+	"""
+	hasPreviousPage: Boolean!
+
+	"""
+	When paginating backwards, the cursor to continue.
+	"""
+	startCursor: String
 }
 
 type Post {
-  account: Account!
-  attachments: [MediaAttachment!]!
-  content: String!
-  createdAt: DateTime!
-  id: UUID!
-  isSensitive: Boolean!
-  subject: String
-  updatedAt: DateTime!
-  url: String!
-  visibility: Visibility!
+	account: Account!
+	attachments: [MediaAttachment!]!
+	content: String!
+	createdAt: DateTime!
+	id: UUID!
+	isSensitive: Boolean!
+	subject: String
+	updatedAt: DateTime!
+	url: String!
+	visibility: Visibility!
 }
 
 type PostConnection {
-  """A list of edges."""
-  edges: [PostEdge!]!
-
-  """A list of nodes."""
-  nodes: [Post!]!
-
-  """Information to aid in pagination."""
-  pageInfo: PageInfo!
+	"""
+	A list of edges.
+	"""
+	edges: [PostEdge!]!
+
+	"""
+	A list of nodes.
+	"""
+	nodes: [Post!]!
+
+	"""
+	Information to aid in pagination.
+	"""
+	pageInfo: PageInfo!
 }
 
-"""An edge in a connection."""
+"""
+An edge in a connection.
+"""
 type PostEdge {
-  """A cursor for use in pagination"""
-  cursor: String!
-
-  """The item at the end of the edge"""
-  node: Post!
+	"""
+	A cursor for use in pagination
+	"""
+	cursor: String!
+
+	"""
+	The item at the end of the edge
+	"""
+	node: Post!
 }
 
 type RootMutation {
-  createPost(content: String!, isSensitive: Boolean!, visibility: Visibility!): Post!
-  deletePost(id: UUID!): UUID!
-  registerOauthApplication(name: String!, redirectUri: String!): OAuth2Application!
-  registerUser(captchaToken: String, email: String!, password: String!, username: String!): User!
-  updateUser(avatar: Upload, displayName: String, header: Upload, locked: Boolean, note: String): Account!
+	createPost(content: String!, isSensitive: Boolean!, visibility: Visibility!): Post!
+	deletePost(id: UUID!): UUID!
+	registerOauthApplication(name: String!, redirectUri: String!): OAuth2Application!
+	registerUser(captchaToken: String, email: String!, password: String!, username: String!): User!
+	updateUser(
+		avatar: Upload
+		displayName: String
+		header: Upload
+		locked: Boolean
+		note: String
+	): Account!
 }
 
 type RootQuery {
-  getAccountById(id: UUID!): Account
-  getPostById(id: UUID!): Post!
-  homeTimeline(after: String, before: String, first: Int, last: Int): PostConnection!
-  instance: Instance!
-  myAccount: Account!
-  publicTimeline(after: String, before: String, first: Int, last: Int, onlyLocal: Boolean! = true): PostConnection!
+	getAccountById(id: UUID!): Account
+	getPostById(id: UUID!): Post!
+	homeTimeline(after: String, before: String, first: Int, last: Int): PostConnection!
+	instance: Instance!
+	myAccount: Account!
+	publicTimeline(
+		after: String
+		before: String
+		first: Int
+		last: Int
+		onlyLocal: Boolean! = true
+	): PostConnection!
 }
 
 """
@@ -154,17 +188,17 @@ scalar UUID
 scalar Upload
 
 type User {
-  account: Account!
-  createdAt: DateTime!
-  email: String!
-  id: UUID!
-  updatedAt: DateTime!
-  username: String!
+	account: Account!
+	createdAt: DateTime!
+	email: String!
+	id: UUID!
+	updatedAt: DateTime!
+	username: String!
 }
 
 enum Visibility {
-  FOLLOWER_ONLY
-  MENTION_ONLY
-  PUBLIC
-  UNLISTED
+	FOLLOWER_ONLY
+	MENTION_ONLY
+	PUBLIC
+	UNLISTED
 }

kitsune-fe/src/routes/+layout.svelte

@@ -20,7 +20,7 @@
 
 {@render children()}
 
-<footer class="absolute bottom-3 left-3 text-sm">
+<footer class="text-sm max-lg:mb-5 max-lg:text-center lg:fixed lg:bottom-3 lg:left-3">
 	<p>
 		Backend version: {backendVersion}
 		<br />Frontend version: {frontendVersion}
@@ -31,7 +31,3 @@
 		<a target="_blank" href="https://github.com/kitsune-soc/kitsune">Kitsune</a>
 	</span>
 </footer>
-
-<style lang="scss">
-	@use '../styles/mixins' as *;
-</style>

kitsune-fe/src/routes/+page.svelte

@@ -80,8 +80,10 @@
 	<button onclick={() => (registerErrorDialogOpen = false)}>Close</button>
 </Dialog>
 
-<div class="flex h-screen w-screen flex-col lg:flex-row lg:place-content-evenly lg:items-center">
-	<div class="place-item-center flex flex-col max-lg:text-center">
+<div
+	class="flex min-h-screen w-screen flex-col lg:flex-row lg:place-content-evenly lg:items-center"
+>
+	<div class="flex flex-col max-lg:place-items-center max-lg:text-center">
 		<img class="w-3/5" src="/kitsune_full.svg" alt="Kitsune logo" />
 
 		<h1>Federated microblogging</h1>
@@ -98,7 +100,7 @@
 		</ul>
 	</div>
 
-	<div class="basis-1/4">
+	<div class="basis-1/4 max-lg:m-5">
 		<form class="grid grid-cols-1 gap-6" onsubmit={doRegister}>
 			<label class="block" for="username">
 				Username