Small fixes + update deps

package.json

@@ -19,25 +19,24 @@
     "node": ">=19.7.0"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.10",
+    "@astrojs/check": "^0.6.0",
     "@astrojs/node": "^8.2.5",
-    "@fontsource-variable/murecho": "^5.0.18",
-    "@fontsource-variable/vollkorn": "^5.0.20",
+    "@fontsource-variable/murecho": "^5.0.19",
+    "@fontsource-variable/vollkorn": "^5.0.21",
     "accept-language": "^3.0.18",
-    "astro": "4.6.1",
+    "astro": "4.8.1",
     "astro-icon": "^1.1.0",
     "node-cache": "^5.1.2",
     "tippy.js": "^6.3.7",
     "ua-parser-js": "^1.0.37"
   },
   "devDependencies": {
-    "@iconify-json/material-symbols": "^1.1.78",
+    "@iconify-json/material-symbols": "^1.1.79",
     "@types/ua-parser-js": "^0.7.39",
-    "astro-meta-tags": "^0.2.2",
+    "astro-meta-tags": "^0.3.0",
     "autoprefixer": "^10.4.19",
-    "bun-types": "^1.1.3",
-    "npm-check-updates": "^16.14.18",
-    "postcss-preset-env": "^9.5.5",
+    "bun-types": "^1.1.7",
+    "postcss-preset-env": "^9.5.11",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "typescript": "^5.4.5"

src/components/RichText/components/RTUpload/components/RTImage.astro

@@ -13,7 +13,7 @@ interface Props {
 
 const {
   node: {
-    value: { id, url, translations },
+    value: { id, url, width, height, translations },
   },
   context,
 } = Astro.props;
@@ -36,7 +36,7 @@ const mediaPage = getLocalizedUrl(`/images/${id}`);
       </HeaderTitle>
     )
   }
-  <a href={mediaPage}><img src={url} /></a>
+  <a href={mediaPage}><img src={url} width={width} height={height} /></a>
   <OpenMediaPageButton url={mediaPage} />
 </div>
 

src/pages/[locale]/images/[id].astro

@@ -27,7 +27,9 @@ const { title, description } =
 
 <AppEmptyLayout>
   <div id="container">
-    <img src={url} width={width} height={height} />
+    <a href={url} target="_blank">
+      <img src={url} width={width} height={height} />
+    </a>
 
     <div>
       <h1>{title}</h1>
@@ -53,12 +55,13 @@ const { title, description } =
     img {
       max-height: 60vh;
       max-width: 100%;
+      height: auto;
       width: auto;
-      object-fit: contain;
     }
 
     h1 {
       max-width: 35em;
+      overflow-wrap: anywhere;
     }
 
     & > div {

src/pages/[locale]/videos/[id].astro

@@ -51,8 +51,8 @@ const { title, description } = getLocalizedMatch(translations);
     > :global(video) {
       max-height: 60vh;
       max-width: 100%;
+      height: auto;
       width: auto;
-      object-fit: contain;
     }
 
     h1 {