Change resource details view header to heading element (#10708)

adamint · Adam Ratzman · web-flow · commit 7009d94f245e · 2025-07-28T23:40:15.000Z
Co-authored-by: Adam Ratzman &lt;adamratzman@microsoft.com&gt;
diff --git a/src/Aspire.Dashboard/Components/Controls/DetailView.razor b/src/Aspire.Dashboard/Components/Controls/DetailView.razor
@@ -6,11 +6,11 @@
     <header style="height: auto;">
         @if (DetailsTitle is not null)
         {
-            <div class="details-header-title" title="@DetailsTitle">@DetailsTitle</div>
+            <h2 class="details-header-title" title="@DetailsTitle">@DetailsTitle</h2>
         }
         else if (DetailsTitleTemplate is not null)
         {
-            <div class="details-header-title">@DetailsTitleTemplate</div>
+            <h2 class="details-header-title">@DetailsTitleTemplate</h2>
         }
         <div class="header-actions">
             @if (ViewportInformation.IsDesktop)
diff --git a/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor.css b/src/Aspire.Dashboard/Components/Controls/SummaryDetailsView.razor.css
@@ -62,6 +62,7 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    margin-bottom: 0;
 }
 
 ::deep .details-container > header > .header-actions {

Original file line number	Diff line number	Diff line change
`@@ -6,11 +6,11 @@`
`6`	`6`	`<header style="height: auto;">`
`7`	`7`	`@if (DetailsTitle is not null)`
`8`	`8`	`{`
`9`		`- <div class="details-header-title" title="@DetailsTitle">@DetailsTitle</div>`
	`9`	`+ <h2 class="details-header-title" title="@DetailsTitle">@DetailsTitle</h2>`
`10`	`10`	`}`
`11`	`11`	`else if (DetailsTitleTemplate is not null)`
`12`	`12`	`{`
`13`		`- <div class="details-header-title">@DetailsTitleTemplate</div>`
	`13`	`+ <h2 class="details-header-title">@DetailsTitleTemplate</h2>`
`14`	`14`	`}`
`15`	`15`	`<div class="header-actions">`
`16`	`16`	`@if (ViewportInformation.IsDesktop)`
Original file line number	Diff line number	Diff line change
`@@ -62,6 +62,7 @@`
`62`	`62`	`text-overflow: ellipsis;`
`63`	`63`	`white-space: nowrap;`
`64`	`64`	`overflow: hidden;`
	`65`	`+ margin-bottom: 0;`
`65`	`66`	`}`
`66`	`67`
`67`	`68`	`::deep .details-container > header > .header-actions {`