Fix #21 respect safe areas on ios safari

package.json

@@ -5,6 +5,7 @@
   "license": "LGPL-3.0-or-later",
   "scripts": {
     "dev": "vite dev",
+    "devn": "vite dev --host",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/app.html

@@ -10,9 +10,8 @@
     <meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
     <meta name="application-name" content="Moshing Mammut" />
     <meta name="msapplication-TileColor" content="#2e0b78" />
-    <meta name="theme-color" content="#2e0b78" />
     <link rel="stylesheet" href="%sveltekit.assets%/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
     <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Atom Feed" />

src/lib/components/FooterComponent.svelte

@@ -42,6 +42,7 @@
     padding: 0.3em 1em;
     margin: 0 -8px;
     border-radius: 3px;
+    padding-bottom: env(safe-area-inset-bottom);
   }
   .icon {
     position: relative;

src/lib/components/PostComponent.svelte

@@ -41,6 +41,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 2;
+    word-break: break-word;
   }
   .meta {
     display: flex;