Skip to content

Commit 6cf6604

Browse files
AClerboisAClerbois
committed
Refactor table markup and CSS for simpler mobile layout
Removed data-labels and card-style mobile tables in McpSummaryViewer and McpViewer.razor. Refactored CSS to use flexbox for mobile responsiveness, simplifying styles and markup. Cleaned up code/URI cell styling for a more streamlined, maintainable layout.
1 parent 9a67837 commit 6cf6604

File tree

4 files changed

+22
-194
lines changed

4 files changed

+22
-194
lines changed

‎examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpSummaryViewer.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ else
7070
{
7171
<tr>
7272
<td><code>@tool.Name</code></td>
73-
<td data-label="Description">@((MarkupString)(tool.Description ?? tool.Summary ?? "-"))</td>
73+
<td>@((MarkupString)(tool.Description ?? tool.Summary ?? "-"))</td>
7474
</tr>
7575
}
7676
</tbody>
@@ -91,7 +91,7 @@ else
9191
{
9292
<tr>
9393
<td><code class="mcp-uri">@resource.UriTemplate</code></td>
94-
<td data-label="Description">@((MarkupString)(resource.Description ?? resource.Summary ?? "-"))</td>
94+
<td>@((MarkupString)(resource.Description ?? resource.Summary ?? "-"))</td>
9595
</tr>
9696
}
9797
</tbody>
@@ -112,7 +112,7 @@ else
112112
{
113113
<tr>
114114
<td><code>@prompt.Name</code></td>
115-
<td data-label="Description">@((MarkupString)(prompt.Description ?? prompt.Summary ?? "-"))</td>
115+
<td>@((MarkupString)(prompt.Description ?? prompt.Summary ?? "-"))</td>
116116
</tr>
117117
}
118118
</tbody>

‎examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpSummaryViewer.razor.css‎

Lines changed: 6 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@
2828
max-width: calc(100vw - 32px);
2929
border-collapse: collapse;
3030
margin-bottom: 16px;
31-
overflow-x: auto;
32-
display: block;
3331
}
3432

3533
::deep .mcp-summary-table th {
@@ -38,7 +36,6 @@
3836
overflow: hidden;
3937
white-space: nowrap;
4038
font-weight: 600;
41-
padding: 8px 12px 8px 0px;
4239
}
4340

4441
::deep .mcp-summary-table tr {
@@ -64,10 +61,6 @@
6461
::deep .mcp-summary-table td code {
6562
font-weight: 600;
6663
background-color: var(--colorNeutralBackground4);
67-
padding: 2px 4px;
68-
border-radius: 3px;
69-
font-size: 12px;
70-
word-break: break-word;
7164
}
7265

7366
::deep .mcp-summary-table td p {
@@ -79,104 +72,29 @@
7972
font-size: 13px;
8073
color: var(--colorBrandForeground1);
8174
background-color: var(--colorNeutralBackground3);
82-
padding: 2px 4px;
83-
border-radius: 3px;
84-
word-break: break-all;
8575
}
8676

8777
::deep .mcp-summary-table code {
8878
font-weight: 600;
8979
}
9080

91-
/* Tablet */
92-
@media(max-width: 1024px) {
93-
::deep .mcp-summary-table {
94-
font-size: 14px;
95-
}
96-
97-
::deep .mcp-summary-table td:first-child {
98-
min-width: 140px;
99-
}
100-
}
101-
10281
/* Mobile */
10382
@media(max-width: 768px) {
104-
::deep .mcp-summary-table {
105-
display: block;
106-
overflow-x: visible;
107-
}
108-
109-
::deep .mcp-summary-table thead {
110-
display: none;
111-
}
112-
113-
::deep .mcp-summary-table tbody {
114-
display: block;
115-
}
116-
117-
::deep .mcp-summary-table tr {
118-
display: block;
119-
margin-bottom: 12px;
120-
border: 1px solid var(--colorNeutralStroke1);
121-
border-radius: var(--borderRadiusMedium);
122-
padding: 12px;
123-
background-color: var(--colorNeutralBackground1);
124-
}
125-
12683
::deep .mcp-summary-table td {
12784
display: block;
128-
width: 100%;
129-
padding: 6px 0;
85+
flex-basis: 100%;
13086
white-space: normal;
131-
border-bottom: none;
132-
text-align: left;
133-
}
134-
135-
::deep .mcp-summary-table td:first-child {
136-
min-width: auto;
137-
white-space: normal;
138-
font-weight: 600;
139-
font-size: 15px;
140-
padding-bottom: 8px;
141-
border-bottom: 1px solid var(--colorNeutralStroke2);
142-
margin-bottom: 8px;
143-
}
144-
145-
::deep .mcp-summary-table td:last-child {
146-
width: 100%;
147-
color: var(--colorNeutralForeground2);
148-
line-height: 1.5;
149-
}
150-
151-
::deep .mcp-summary-table .mcp-uri {
152-
font-size: 12px;
153-
display: inline-block;
154-
max-width: 100%;
155-
overflow: hidden;
156-
text-overflow: ellipsis;
157-
}
158-
}
159-
160-
/* Small mobile */
161-
@media(max-width: 480px) {
162-
::deep .mcp-summary-table {
163-
font-size: 13px;
16487
}
16588

16689
::deep .mcp-summary-table tr {
167-
padding: 10px;
90+
display: flex;
91+
flex-direction: row;
92+
flex-wrap: wrap;
16893
margin-bottom: 10px;
16994
}
17095

17196
::deep .mcp-summary-table td:first-child {
172-
font-size: 14px;
173-
}
174-
175-
::deep .mcp-summary-table td code {
176-
font-size: 11px;
177-
}
178-
179-
::deep .mcp-summary-table .mcp-uri {
180-
font-size: 11px;
97+
min-width: auto;
98+
white-space: normal;
18199
}
182100
}

‎examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpViewer.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ else
7575
<br /><small>→ @tool.ReturnType</small>
7676
}
7777
</td>
78-
<td data-label="Description">@((MarkupString)(tool.Description ?? tool.Summary ?? "-"))</td>
79-
<td data-label="Parameters">
78+
<td>@((MarkupString)(tool.Description ?? tool.Summary ?? "-"))</td>
79+
<td>
8080
@if (tool.Parameters?.Count > 0)
8181
{
8282
<ul class="mcp-params">
@@ -136,14 +136,14 @@ else
136136
<br /><small>@resource.Title</small>
137137
}
138138
</td>
139-
<td data-label="URI Template">
139+
<td>
140140
<code class="mcp-uri">@resource.UriTemplate</code>
141141
@if (!string.IsNullOrEmpty(resource.MimeType))
142142
{
143143
<br /><small>@resource.MimeType</small>
144144
}
145145
</td>
146-
<td data-label="Description">@((MarkupString)(resource.Description ?? resource.Summary ?? "-"))</td>
146+
<td>@((MarkupString)(resource.Description ?? resource.Summary ?? "-"))</td>
147147
</tr>
148148
}
149149
</tbody>
@@ -172,8 +172,8 @@ else
172172
{
173173
<tr>
174174
<td><code>@prompt.Name</code></td>
175-
<td data-label="Description">@((MarkupString)(prompt.Description ?? prompt.Summary ?? "-"))</td>
176-
<td data-label="Parameters">
175+
<td>@((MarkupString)(prompt.Description ?? prompt.Summary ?? "-"))</td>
176+
<td>
177177
@if (prompt.Parameters?.Count > 0)
178178
{
179179
<ul class="mcp-params">

‎examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpViewer.razor.css‎

Lines changed: 7 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
max-width: calc(100vw - 32px);
1515
border-collapse: collapse;
1616
margin-bottom: 24px;
17-
overflow-x: auto;
18-
display: block;
1917
}
2018

2119
::deep .mcp-table th {
@@ -24,7 +22,6 @@
2422
overflow: hidden;
2523
white-space: nowrap;
2624
font-weight: 600;
27-
padding: 8px 12px 8px 0px;
2825
}
2926

3027
::deep .mcp-table tr {
@@ -49,10 +46,6 @@
4946
::deep .mcp-table td code {
5047
font-weight: 600;
5148
background-color: var(--colorNeutralBackground4);
52-
padding: 2px 4px;
53-
border-radius: 3px;
54-
font-size: 12px;
55-
word-break: break-word;
5649
}
5750

5851
::deep .mcp-table td p {
@@ -63,7 +56,6 @@
6356
font-family: var(--fontFamilyMonospace);
6457
font-size: 12px;
6558
color: var(--colorBrandForeground1);
66-
word-break: break-all;
6759
}
6860

6961
::deep .mcp-table .mcp-params {
@@ -96,106 +88,24 @@
9688
color: var(--colorNeutralForeground3);
9789
display: block;
9890
margin-top: 2px;
99-
font-size: 11px;
100-
}
101-
102-
/* Tablet */
103-
@media(max-width: 1024px) {
104-
::deep .mcp-table {
105-
font-size: 14px;
106-
}
107-
108-
::deep .mcp-table td:first-child {
109-
min-width: 120px;
11091
}
111-
}
11292

11393
/* Mobile */
11494
@media(max-width: 768px) {
115-
::deep .mcp-table {
116-
display: block;
117-
overflow-x: visible;
118-
}
119-
120-
::deep .mcp-table thead {
121-
display: none;
122-
}
123-
124-
::deep .mcp-table tbody {
125-
display: block;
126-
}
127-
128-
::deep .mcp-table tr {
129-
display: block;
130-
margin-bottom: 16px;
131-
border: 1px solid var(--colorNeutralStroke1);
132-
border-radius: var(--borderRadiusMedium);
133-
padding: 12px;
134-
background-color: var(--colorNeutralBackground1);
135-
}
136-
13795
::deep .mcp-table td {
13896
display: block;
139-
width: 100%;
140-
padding: 8px 0;
97+
flex-basis: 100%;
14198
white-space: normal;
142-
border-bottom: none;
143-
text-align: left;
144-
}
145-
146-
::deep .mcp-table td:first-child {
147-
min-width: auto;
148-
font-weight: 600;
149-
font-size: 16px;
150-
padding-bottom: 12px;
151-
border-bottom: 1px solid var(--colorNeutralStroke2);
152-
margin-bottom: 8px;
153-
}
154-
155-
::deep .mcp-table td:last-child {
156-
width: 100%;
157-
}
158-
159-
::deep .mcp-table td:before {
160-
content: attr(data-label);
161-
font-weight: 600;
162-
display: block;
163-
margin-bottom: 4px;
164-
color: var(--colorNeutralForeground2);
165-
font-size: 12px;
166-
text-transform: uppercase;
167-
}
168-
169-
::deep .mcp-table td:first-child:before {
170-
display: none;
171-
}
172-
173-
::deep .mcp-table .mcp-params {
174-
margin-top: 8px;
175-
}
176-
177-
::deep .mcp-table .mcp-params li {
178-
padding-left: 12px;
179-
border-left: 2px solid var(--colorBrandStroke1);
180-
margin-bottom: 8px;
181-
}
182-
}
183-
184-
/* Small mobile */
185-
@media(max-width: 480px) {
186-
::deep .mcp-table {
187-
font-size: 13px;
18899
}
189100

190101
::deep .mcp-table tr {
191-
padding: 10px;
102+
display: flex;
103+
flex-direction: row;
104+
flex-wrap: wrap;
105+
margin-bottom: 10px;
192106
}
193107

194-
::deep .mcp-table td code {
195-
font-size: 11px;
196-
}
197-
198-
::deep .mcp-table .mcp-uri {
199-
font-size: 11px;
108+
::deep .mcp-table td:first-child {
109+
min-width: auto;
200110
}
201111
}

0 commit comments

Comments
 (0)