docs: refresh modernized widget screenshots

apps/docs/docs/widgets/calendar/index.mdx

@@ -31,16 +31,12 @@ the same data is requested through Homarr's MCP or Assistant tools.
 
 ### Screenshots
 
-import popover from "./img/popover.png";
-import withIntegrations from "./img/with-integrations.png";
-import withoutIntegrations from "./img/without-integrations.png";
+import currentView from "./img/current-view.png";
+import advancedView from "./img/advanced-view.png";
 
-<div className="flex gap-1">
-  <img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
-  <div className="flex flex-col gap-1">
-    <img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
-    <img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
-  </div>
+<div className="flex flex-col gap-1">
+  <img src={currentView} alt="Calendar month view with marked events" width={513} height={303} />
+  <img src={advancedView} alt="Calendar advanced view with grouped events" width={800} height={484} />
 </div>
 
 ### Supported Integrations

apps/docs/docs/widgets/media-server/index.mdx

@@ -31,8 +31,12 @@ Sessions without user metadata remain visible and are labeled as an unknown user
 ### Screenshots
 
 import mediaTable from "./img/table.png";
+import mediaAdvancedView from "./img/advanced-view.png";
 
-<img src={mediaTable} alt="media-server-streams" width={128 * 3 * 1.5} height={128 * 1.5} />
+<div className="flex flex-col gap-1">
+  <img src={mediaTable} alt="Media server compact streams table" width={303} height={198} />
+  <img src={mediaAdvancedView} alt="Media server advanced view with stream summary" width={800} height={484} />
+</div>
 
 ### Supported Integrations
 

apps/docs/docs/widgets/weather/index.mdx

@@ -23,10 +23,12 @@ Meteo response.
 
 import forecastWeather from "./img/forecast.png";
 import currentWeather from "./img/current.png";
+import advancedWeather from "./img/advanced-view.png";
 
 <div className="flex flex-col gap-1">
-  <img src={forecastWeather} alt="weather forecast-5-days" width={128 * 4.5} />
-  <img src={currentWeather} alt="weather current" width={128 * 3} />
+  <img src={forecastWeather} alt="Weather compact forecast" width={238} height={112} />
+  <img src={currentWeather} alt="Weather compact current conditions" width={198} height={93} />
+  <img src={advancedWeather} alt="Weather advanced view with seven-day forecast details" width={800} height={484} />
 </div>
 
 <WidgetInteractionGuide />