Auto reconnect to Mastodon WebSocket if it fails

src/lib/components/FooterComponent.svelte

@@ -58,7 +58,7 @@
       background-color: var(--color-grey-translucent);
     }
   }
-  @media only screen and (max-device-width: 620px) {
+  @media only screen and (max-width: 620px) {
     .mastodonInstance,
     .feedSuffix {
       display: none;
@@ -68,7 +68,7 @@
     }
   }
 
-  @media only screen and (max-device-width: 430px) {
+  @media only screen and (max-width: 430px) {
     .mastodonInstance,
     .feedSuffix,
     .secretIngredient {
@@ -76,7 +76,7 @@
     }
   }
 
-  @media only screen and (max-device-width: 370px) {
+  @media only screen and (max-width: 370px) {
     .label {
       display: none;
     }

src/lib/server/timeline.ts

@@ -78,7 +78,7 @@ export class TimelineReader {
     return false;
   }
 
-  private constructor() {
+  private startWebsocket() {
     const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
     socket.onopen = () => {
       socket.send('{ "type": "subscribe", "stream": "public:local"}');
@@ -113,13 +113,25 @@ export class TimelineReader {
       }
     };
     socket.onclose = (event) => {
-      console.log('Closed', event, event.code, event.reason);
+      console.warn(
+        `Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`
+      );
+      setTimeout(() => {
+        console.info(`Attempting to reconenct to WS`);
+        this.startWebsocket();
+      }, 10000);
     };
     socket.onerror = (event) => {
-      console.log('error', event, event.message, event.error);
+      console.error(
+        `Websocket connection to ${MASTODON_INSTANCE} failed. ${event.type}: ${event.error}, message: '${event.message}'`
+      );
     };
   }
 
+  private constructor() {
+    this.startWebsocket();
+  }
+
   public static init() {
     if (this._instance === undefined) {
       this._instance = new TimelineReader();

src/routes/+layout.svelte

@@ -34,9 +34,9 @@
     align-items: center;
     gap: 10px;
   }
-  @media only screen and (max-device-width: 620px) {
+  @media only screen and (max-width: 620px) {
     .footer {
-      width: calc(100% + 16px);
+      width: 100%;
     }
   }
 </style>

src/routes/+page.svelte

@@ -202,9 +202,10 @@
     z-index: 100;
   }
 
-  @media only screen and (max-device-width: 650px) {
+  @media only screen and (max-width: 650px) {
     .post {
-      max-width: 100vw;
+      max-width: calc(100vw - 16px);
+      padding: 1em 0;
     }
   }
 </style>