[docs] Document dashboard resource list densities

src/frontend/src/content/docs/dashboard/explore.mdx

@@ -22,6 +22,16 @@ import projects from '@assets/dashboard/explore/projects-dark.png';
 import projectsLight from '@assets/dashboard/explore/projects-light.png';
 import projectGraphs from '@assets/dashboard/explore/project-graphs.png';
 import projectGraphsLight from '@assets/dashboard/explore/project-graphs-light.png';
+import resourceListDensitySettings from '@assets/dashboard/explore/resource-list-density-settings.png';
+import resourceListDensitySettingsLight from '@assets/dashboard/explore/resource-list-density-settings-light.png';
+import resourceListDensityCompact from '@assets/dashboard/explore/resource-list-density-compact.png';
+import resourceListDensityCompactLight from '@assets/dashboard/explore/resource-list-density-compact-light.png';
+import resourceListDensityCompactHover from '@assets/dashboard/explore/resource-list-density-compact-hover.png';
+import resourceListDensityCompactHoverLight from '@assets/dashboard/explore/resource-list-density-compact-hover-light.png';
+import resourceListDensityComfortable from '@assets/dashboard/explore/resource-list-density-comfortable.png';
+import resourceListDensityComfortableLight from '@assets/dashboard/explore/resource-list-density-comfortable-light.png';
+import resourceListDensitySpacious from '@assets/dashboard/explore/resource-list-density-spacious.png';
+import resourceListDensitySpaciousLight from '@assets/dashboard/explore/resource-list-density-spacious-light.png';
 import resourceStopAction from '@assets/dashboard/explore/resource-stop-action.png';
 import resourceStopActionLight from '@assets/dashboard/explore/resource-stop-action-light.png';
 import resourceStoppedAction from '@assets/dashboard/explore/resource-stopped-action.png';
@@ -225,6 +235,38 @@ You can interact with the graph by selecting a resource to view its details. The
 
 Select **Export as Mermaid** to open the currently visible resource graph as [Mermaid](https://mermaid.js.org) diagram source in the [text visualizer](#copy-or-open-in-text-visualizer).
 
+### Resource list density
+
+<Aside type="note">
+The behavior and screenshots in this section apply to Aspire 17.1 and later.
+</Aside>
+
+The resource list supports three densities that control how many lines each resource uses. To change the density, select **Settings** in the dashboard header, and then choose **Spacious**, **Comfortable**, or **Compact** under **Resource list density**. The default density is **Compact**.
+
+<ThemeImage dark={resourceListDensitySettings} light={resourceListDensitySettingsLight} width={470} height={213} alt="A screenshot of the Appearance section of the Aspire dashboard Settings dialog, with the Resource list density option set to Compact." />
+
+The available densities are:
+
+- **Compact**: One line per resource. The icon and name are followed by aligned type and state columns. In the sidebar, a row's actions replace those columns while a user hovers over or focuses on that row. On touch screens, the actions are always shown. Availability badges, such as "No logs", aren't shown on one line. Instead, an unavailable row is muted and the reason is available in its tooltip.
+- **Comfortable**: Two lines per resource.
+- **Spacious**: Three lines per resource in the sidebar. The third line shows an unhealthy health status if there is one, otherwise the primary endpoint, otherwise the source. Endpoint query values are masked.
+
+The following screenshot shows the sidebar resource list at the **Compact** density:
+
+<ThemeImage dark={resourceListDensityCompact} light={resourceListDensityCompactLight} width={427} height={159} alt="A screenshot of the Aspire dashboard sidebar resource list at Compact density, with one line per resource showing the name, type, and state." />
+
+When you hover over a **Compact** row in the sidebar, the row's actions replace its type and state columns:
+
+<ThemeImage dark={resourceListDensityCompactHover} light={resourceListDensityCompactHoverLight} width={427} height={159} alt="A screenshot of the Aspire dashboard sidebar resource list at Compact density, with the pointer over the apiservice row so that its actions are shown in place of the type and state columns." />
+
+The following screenshot shows the same list at the **Comfortable** density:
+
+<ThemeImage dark={resourceListDensityComfortable} light={resourceListDensityComfortableLight} width={427} height={199} alt="A screenshot of the Aspire dashboard sidebar resource list at Comfortable density, with two lines per resource showing the name, then the state and start time." />
+
+The following screenshot shows the same list at the **Spacious** density, with the primary endpoint on the third line:
+
+<ThemeImage dark={resourceListDensitySpacious} light={resourceListDensitySpaciousLight} width={427} height={247} alt="A screenshot of the Aspire dashboard sidebar resource list at Spacious density, with three lines per resource showing the name, the state and start time, and the primary endpoint." />
+
 ### Resource actions
 
 Each resource has a set of available actions based on its current state, capabilities, and telemetry. For example, if a resource is running, the **Stop** action is enabled. If the resource is stopped, the **Start** action is enabled. Actions that don't apply to a resource may be omitted from its menu.