fix(dashboard): align the marquee clip/fade to the card border

The title clipped at its own edge, a row-padding inside the card, so the cut sat
mid-card. Bleed the title to the card border (cancel the row's px-2, re-add it as
inner padding so the text still starts in the same place), and fade both borders
while marqueeing so the title dissolves at each card edge.

Author: suleimansh

packages/framework-dashboard/layouts/tailwind.css

@@ -134,9 +134,18 @@ body {
   overflow: hidden;
   white-space: nowrap;
   container-type: inline-size;
+  /* Bleed to the card border (cancel the row's px-2) so the clip and the fade land on the border,
+     not a row-padding inside it; the text still starts a row-padding in via the matching inner pad. */
+  margin-inline: -0.5rem;
+  padding-inline: 0.5rem;
   -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent);
   mask-image: linear-gradient(to right, #000 calc(100% - 1.25rem), transparent);
 }
+/* While marqueeing, fade both borders so the title dissolves at each card edge, not only the end. */
+.rail-row:hover .rail-title {
+  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
+  mask-image: linear-gradient(to right, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
+}
 .rail-title-inner {
   display: inline-block;
   will-change: transform;