Align applies-item styling with tab-item

Author: reakaleek

src/Elastic.Documentation.Site/Assets/markdown/applies-switch.css

@@ -12,9 +12,24 @@
 				@apply bg-grey-10 border-b-1 border-b-black text-black;
 			}
 		}
-		
-		.applicable-info {
-			@apply cursor-pointer!;
+
+		.applies-item {
+			@apply cursor-pointer text-inherit;
+
+			&:hover {
+				@apply text-inherit;
+			}
+			.applicable-info {
+				@apply cursor-pointer border-none bg-transparent p-0;
+
+				&:not(:last-child):after {
+					content: ',';
+				}
+			}
+			.applicable-name,
+			.applicable-meta {
+				@apply text-base;
+			}
 		}
 
 		.applies-switch-input {

src/Elastic.Markdown/Myst/Components/ApplicableToComponent.cshtml

@@ -2,7 +2,7 @@
 
 @foreach (var item in Model.GetApplicabilityItems())
 {
-		<span class="applicable-info" data-tippy-content="@(new HtmlString(item.RenderData.TooltipText))">
+		<span class="applicable-info" data-tippy-content="@(new HtmlString(Model.ShowTooltip ? item.RenderData.TooltipText : string.Empty))">
 			<span class="applicable-name">@item.Key</span>
 
 			@if (!string.IsNullOrEmpty(item.Key) && (item.RenderData.ShowLifecycleName || item.RenderData.ShowVersion || !string.IsNullOrEmpty(item.RenderData.BadgeLifecycleText)))

src/Elastic.Markdown/Myst/Components/ApplicableToViewModel.cs

@@ -13,6 +13,8 @@ public class ApplicableToViewModel
 	private readonly ApplicabilityRenderer _applicabilityRenderer = new();
 
 	public required bool Inline { get; init; }
+
+	public bool ShowTooltip { get; init; } = true;
 	public required ApplicableTo AppliesTo { get; init; }
 	public required VersionsConfiguration VersionsConfig { get; init; }
 

src/Elastic.Markdown/Myst/Directives/AppliesSwitch/AppliesItemView.cshtml

@@ -16,6 +16,7 @@
 				{
 					AppliesTo = Model.AppliesTo,
 					Inline = true,
+					ShowTooltip = false,
 					VersionsConfig = Model.BuildContext.VersionsConfiguration
 				}))
 			</span>