docs: finish onboarding mobile coverage

apps/docs/docs/getting-started/after-the-installation.mdx

@@ -10,14 +10,17 @@ import imageStartFromScratchStepServerSettings from "./img/onboarding-from-scrat
 import imageStartFromScratchStepAdminUser from "./img/onboarding-from-scratch-step-admin-user.png";
 import imageStartFromScratchStepExternalAdminGroup from "./img/onboarding-from-scratch-step-external-admin-group.png";
 import imageStartFromScratchStepFinish from "./img/onboarding-from-scratch-step-finish.png";
-import manageBoardHeaderEditMode from "./img/manage-board-header-edit-mode.png";
-import manageBoardHeaderAddItem from "./img/manage-board-header-add-item-menu.png";
-import manageBoardHeaderChooseItem from "./img/manage-board-header-choose-item.png";
 import manageBoardNoApp from "./img/manage-board-no-app.png";
-import currentBoardEditMode from "../management/boards/img/board-edit-mode.png";
-import currentAddBoardContentMenu from "../management/boards/img/add-board-content-menu.png";
 import currentKeyboardTileEditing from "../management/boards/img/keyboard-tile-editing.png";
-import currentBoardMobileView from "./img/board-mobile-view.png";
+import boardDesktopCurrent from "./img/onboarding-board-desktop-current.png";
+import boardEditModeCurrent from "./img/onboarding-board-edit-mode-current.png";
+import addContentMenuCurrent from "./img/onboarding-add-content-menu-current.png";
+import chooseItemCurrent from "./img/onboarding-choose-item-current.png";
+import editItemCurrent from "./img/onboarding-edit-item-current.png";
+import boardsHomeMobileMenu from "./img/onboarding-boards-home-mobile-menu.png";
+import layoutSettingsCurrent from "./img/onboarding-layout-settings-current.png";
+import moveResizeMenuCurrent from "./img/onboarding-move-resize-menu-current.png";
+import currentBoardMobileView from "./img/onboarding-board-mobile-current.png";
 import manageExportOldHomarr from "./img/old-homarr-export-data.png";
 import manageImportOldHomarrDropzone from "./img/old-homarr-import-dropzone.png";
 import manageImportOldHomarrChooseData from "./img/old-homarr-import-choose-imported-data.png";
@@ -33,12 +36,12 @@ Congratulations on installing Homarr. Now it's time to get yourself familiar wit
 
 ## Onboarding
 
-The onboard will show the first time you start Homarr.
+The onboarding will show the first time you start Homarr.
 This process will help you with your first steps and adding some initial data, such as the administrator account.
 
 :::note
 
-If you see this screen repeatitly after you restarted the Homarr container, your Docker mounting paths may be missing,
+If you see this screen repeatedly after you restart the Homarr container, your Docker mounting paths may be missing,
 incorrect or read-only. Read [our installation instructions](/docs/getting-started/installation/docker) again to fix this issue.
 
 :::
@@ -72,7 +75,7 @@ The name of the group must match exactly the name of the group in the provider.
 />
 
 Next, you can configure some basic settings for Homarr. We recommend to leave all settings at default for most users.
-Here you can also disable analytics. Please note that our analytics are completly anonymous and is fully compliant with GDPR and PECR.
+Here you can also disable analytics. Please note that our analytics are completely anonymous and fully compliant with GDPR and PECR.
 
 <img
   src={imageStartFromScratchStepServerSettings}
@@ -130,12 +133,12 @@ It is important that you first migrate correctly using [the list of breaking cha
 1. Navigate to your old Homarr, open your management pages, open the tools submenu and open `Migrate to 1.0`.
 2. Check the contents that you want to export. We recommend you to export all data.
 3. Click on the export data button
-4. Save the ZIP file, that is being downloaded, on your device. If you selected "integrations" or "users", you also get an encryption / decryption key.
-   Copy it and do not loose it!
-5. Go to your new >1.0.0 Homarr instance and start the onboarding. Choose `Import from Homarr before 1.0`
+4. Save the downloaded ZIP file on your device. If you selected "integrations" or "users", you also get an encryption / decryption key.
+   Copy it and keep it safe; you need it later in the import flow.
+5. Go to your new Homarr 1.0 or later instance and start the onboarding. Choose `Import from Homarr before 1.0`.
 6. Drag and drop your previously downloaded ZIP archive into the file upload: <br/><img src={manageImportOldHomarrDropzone} style={{ maxWidth: 500 }} />
 7. Next, choose the data that you want to import and how to import it. Old Homarr screen sizes are imported as responsive layouts on the same board: the narrowest becomes **Mobile**, the widest becomes **Base**, and layouts between them become custom layouts. Homarr normalizes duplicate breakpoints automatically, so you can review the imported board in Board Settings and adjust the layouts there.<br/><img src={manageImportOldHomarrChooseData} style={{ maxWidth: 500 }} />
-   For example, legacy `sm`, `md`, and `lg` layouts at `0px`, `800px`, and `1400px` become Mobile, a custom layout, and Base. The imported board keeps each layout's positions so you can review the result before saving.
+   For example, legacy `sm`, `md`, and `lg` layouts at `0px`, `800px`, and `1400px` become Mobile, a custom layout, and Base. The imported board keeps each layout's positions, names, and column counts where possible so you can review the result before saving. If a board has one saved layout, Homarr keeps it as Base and generates Mobile from it; a board without saved layouts receives Mobile at `0px` with 3 columns and Base at `768px` with 10 columns.
 8. If you previously exported integrations or users, you will be asked to decrypt the data safely using your obtained encryption token. Paste into the modal and confirm your action.<br/><img src={manageImportDecryptionToken} style={{ maxWidth: 500 }} />
 9. Next, you can [follow the same setup as when starting from scratch](#starting-from-scratch). After you completed the onboarding, all of your data will be migrated and available.
 
@@ -152,12 +155,36 @@ Public boards are also accessible for users, that are not logged in ([see access
 
 ![](./img/manage-create-board-modal.png)
 
-Congratulations - you've just created your first board. You can see boards, that you have access to, on this page:
+Congratulations - you've just created your first board. You can see the boards you have access to on this page:
 
-![](./img/manage-view-board.png)
+<figure>
+  <img
+    src={boardsHomeMobileMenu}
+    alt="Boards management page showing a Home badge and separate desktop and mobile home-board menu entries"
+    style={{ maxWidth: "100%" }}
+  />
+  <figcaption>The Boards page selects the board opened from Home separately for desktop and mobile.</figcaption>
+</figure>
+
+The board marked **Home** is the board opened from the desktop Home route. **Set as your mobile board** selects which board
+opens on phones. This is separate from the **Mobile** layout: the home-board setting chooses a board, while **Mobile** and
+**Base** are responsive layouts inside that board. A phone can therefore open a different home board and still use that
+board's Mobile layout.
 
 New boards start with **Mobile** and **Base** responsive layouts automatically, so you can edit the board for phones and
-desktops without creating extra layouts first. Each layout keeps its own tile positions and sizes.
+desktops without creating extra layouts first. Mobile starts at `0px` with 3 columns and Base at `768px` with 10 columns.
+Each layout keeps its own tile positions and sizes.
+
+<figure>
+  <img
+    src={layoutSettingsCurrent}
+    alt="Board Settings Layout section showing independent Mobile and Base layout cards"
+    style={{ maxWidth: "100%" }}
+  />
+  <figcaption>
+    Mobile and Base are protected layouts inside the same board; each keeps its own positions and sizes.
+  </figcaption>
+</figure>
 
 ## Add your first app to Homarr
 
@@ -181,28 +208,34 @@ After you created the app, you'll see in on the apps page:
 Let's add your freshly created app, from the previous step, to the board.
 To do this, edit your previously created board by clicking on the big `Open board` button:
 
-![](./img/manage-view-board.png)
+<figure>
+  <img src={boardDesktopCurrent} alt="Current Homarr board opened from the Boards page" style={{ maxWidth: "100%" }} />
+  <figcaption>Open a board to view its dashboard, then enter edit mode to arrange its content.</figcaption>
+</figure>
 
 Here you have the following options in the header:
 
 ![](./img/manage-board-header.png)
 
 - **Search**: Here you can search for data. You can search for integrations, boards, actions, sites and much more. Some actions may be context dependent (eg. will only show when certain widgets are on your page)
-- **Edit mode**: Clicking this button will toggle the edit mode. In this mode you can edit the contents of your board.
+- **Edit board**: Clicking this button will toggle edit mode. In this mode you can edit the contents of your board.
 - **Settings**: Clicking this button will redirect you to a settings page where you can adjust the board settings (page title, colors, ...).
 - **Board switcher**: Use this button to open another board that you can access.
 - **Profile**: This avatar will be visible on every page. Clicking it will show a menu with actions.
 
 When entering the edit mode, you'll get some additional buttons to work with:
 
-<img src={manageBoardHeaderEditMode} alt={"Screenshot of buttons in the edit mode"} width={200} />
-
-The current editor keeps the board visible while it prepares its controls:
-
-<img src={currentBoardEditMode} alt="Current Homarr board in edit mode" style={{ maxWidth: "100%" }} />
+<figure>
+  <img
+    src={boardEditModeCurrent}
+    alt="Current Homarr board editor with tile controls visible"
+    style={{ maxWidth: "100%" }}
+  />
+  <figcaption>The current editor keeps the board visible while its editing controls are available.</figcaption>
+</figure>
 
 - **Add board content**: Click this button to create a new item, app, integration, or Container.
-- **Exit edit mode**: Click this button to save your changes and exit edit mode. If you leave with unsaved changes, Homarr asks whether to discard them.
+- **Save board**: Click this button to save your changes and leave edit mode. If you leave with unsaved changes, Homarr asks whether to discard them.
 
 Outside edit mode, right-click a widget for its live status, refresh, settings, quick options, and supported actions.
 Hold `Shift` while hovering a widget that supports advanced view to expand it in place while the rest of the board
@@ -212,20 +245,26 @@ keep its advanced view open until you close it. Widgets without a distinct advan
 To continue, click **New item** in the add-content menu. New content is placed at the first available position on the main
 canvas; it is not inserted at a clicked empty cell or directly into a rail or Container:
 
-<img src={manageBoardHeaderAddItem} alt={"Screenshot of the add item menu"} width={200} />
-
-The same menu also exposes direct actions for an app, integration, and Container:
-
-<img
-  src={currentAddBoardContentMenu}
-  alt="Current add board content menu with item, app, integration, and Container actions"
-  style={{ maxWidth: "100%" }}
-/>
+<figure>
+  <img
+    src={addContentMenuCurrent}
+    alt="Current add board content menu with item, app, integration, and Container actions"
+    style={{ maxWidth: "100%" }}
+  />
+  <figcaption>The add-content menu provides the four supported ways to place new content on the board.</figcaption>
+</figure>
 
 Next, you can choose what item you'd like to add.
 We will discuss the other options in the following sections - for now choose "App" to continue.
 
-<img src={manageBoardHeaderChooseItem} alt={"Screenshot of choosing the app item in the modal"} width={300} />
+<figure>
+  <img
+    src={chooseItemCurrent}
+    alt="Current item picker showing the App card and other item types"
+    style={{ maxWidth: "100%" }}
+  />
+  <figcaption>Choose the App item from the current picker to add an app tile.</figcaption>
+</figure>
 
 As soon as you chose the app, the modal will close and you'll get the following item on your board:
 
@@ -234,11 +273,21 @@ As soon as you chose the app, the modal will close and you'll get the following
 This is expected, because you haven't told Homarr what app it should show in this item.
 To configure this, click on the small 3 dots at the top of the item in the edit mode and choose "Edit item" in the menu.
 
-![](./img/manage-board-edit-app.gif)
+<figure>
+  <img
+    src={moveResizeMenuCurrent}
+    alt="Current board tile menu showing Edit item and Move or resize item"
+    style={{ maxWidth: "450px" }}
+  />
+  <figcaption>The tile menu contains the item editor and the separate move-and-resize tools.</figcaption>
+</figure>
 
 In the modal you can edit the app that you want to display:
 
-![](./img/manage-board-choose-app.png)
+<figure>
+  <img src={editItemCurrent} alt="Current Edit item modal for an App tile" style={{ maxWidth: "620px" }} />
+  <figcaption>Use the Edit item modal to choose the app and configure how its tile is displayed.</figcaption>
+</figure>
 
 As soon as you save your changes, the tile on the board will refresh and display your app.
 Resize from any visible edge or corner handle. For a Container, activate its top-left grip before using its resize handles.
@@ -256,14 +305,19 @@ The complete canvas always fits the available width without horizontal board scr
 widget's readable typography and control density instead of shrinking each widget independently.
 It does not squeeze or reflow the content of individual widgets, so a widget keeps the same design and proportions across screen sizes.
 
-On a narrow screen, Homarr uses the Mobile layout and stacks the board content vertically while preserving each widget's
-fixed logical proportions:
+On a narrow screen, Homarr uses the **Mobile layout** for the selected board and stacks the board content vertically while
+preserving each widget's fixed logical proportions:
 
-<img
-  src={currentBoardMobileView}
-  alt="Homarr board rendered in a narrow mobile viewport"
-  style={{ maxWidth: "390px" }}
-/>
+<figure>
+  <img
+    src={currentBoardMobileView}
+    alt="Homarr's Mobile layout in a 390-pixel-wide viewport, with tiles scaled to fit and stacked vertically"
+    style={{ maxWidth: "390px" }}
+  />
+  <figcaption>
+    At phone width, the selected board uses its Mobile layout and fits the complete canvas to the viewport.
+  </figcaption>
+</figure>
 
 :::note
 
@@ -290,13 +344,7 @@ Keyboard commands at a grid boundary or minimum tile size are ignored and announ
 <img src={currentKeyboardTileEditing} alt="A board tile focused for keyboard editing" style={{ maxWidth: "100%" }} />
 
 Open **Move / resize item** from the tile menu to move the tile to another section or rail and enter precise numeric
-coordinates and dimensions. The image below shows the menu entry point:
-
-![](./img/manage-board-move-resize-item-menu.png)
-
-Be sure to save your changes by exiting edit mode!
-
-![](./img/exit-edit-mode.png)
+coordinates and dimensions. After making changes, click **Save board** to persist them and leave edit mode.
 
 ## Adding your first integration
 
@@ -331,7 +379,14 @@ Let's add your integration, that you have configured in the section above, as a
 First, navigate back to your board that you want to add it to.
 Next, enter edit mode again and add another item to your board:
 
-![](./img/manage-board-header-add-item-menu.png)
+<figure>
+  <img
+    src={addContentMenuCurrent}
+    alt="Current add board content menu with item, app, integration, and Container actions"
+    style={{ maxWidth: "100%" }}
+  />
+  <figcaption>Use the same add-content menu to place an integration widget on the board.</figcaption>
+</figure>
 
 Instead of choosing an app, let's choose `System Health Monitoring` this time.
 Click on "Add to board":
@@ -358,9 +413,7 @@ Editing a widget will trigger a data update and data will soon appear:
 
 ![](./img/widget-system-health.png)
 
-As with every change, don't forget to save your changes using the exit edit mode button:
-
-![](./img/exit-edit-mode.png)
+As with every change, click **Save board** to persist your board changes and leave edit mode.
 
 ## Organizing items with Containers