[CSM Portal Microapp] Fix build break, text-overflow, and simplify Assigned to me

apps/csm-portal/microapp/src/components/announcements/AnnouncementCard.tsx

@@ -27,7 +27,7 @@ export function AnnouncementCard({ item }: { item: CaseSummary }) {
     <Card variant="outlined" sx={{ p: 2 }}>
       <Stack gap={1}>
         <Stack direction="row" alignItems="flex-start" justifyContent="space-between" gap={1}>
-          <Typography variant="subtitle2" noWrap>
+          <Typography variant="subtitle2" noWrap sx={{ minWidth: 0 }}>
             {item.number || "—"}
           </Typography>
           <AnnouncementStateChip state={item.state} />

apps/csm-portal/microapp/src/components/home/AssignedToMeSection.tsx

@@ -14,34 +14,39 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { Button, Stack, Typography } from "@wso2/oxygen-ui";
+import { Card, Stack, Typography } from "@wso2/oxygen-ui";
 import { useQuery } from "@tanstack/react-query";
-import { Link } from "react-router-dom";
 import { currentUser } from "@src/services/currentUser";
 import { dashboard } from "@src/services/dashboard";
 import { CaseCard, CaseCardSkeleton } from "@components/support/CaseCard";
-import { EmptyState } from "@components/support/EmptyState";
 import { ErrorState } from "@components/support/ErrorState";
+import { RefreshButton } from "./RefreshButton";
 
 // The signed-in user's own non-closed cases — mirrors the webapp's "Assigned to me" widget
 // (apps/csm-portal/webapp/src/features/csm-dashboard/components/MyAssignedCases.tsx), capped to a
-// short 5-item preview with a "View all" link out to Support, rather than paginated in place.
+// short 5-item preview. No "View all" (Support already covers the full list) — instead a
+// RefreshButton, same as the webapp's widget header.
 export function AssignedToMeSection() {
   const { data: currentUserId } = useQuery(currentUser.id());
-  const { data, isPending, isError, refetch } = useQuery(dashboard.assignedToMe(currentUserId ?? null));
+  const { data, isPending, isFetching, isError, dataUpdatedAt, refetch } = useQuery(
+    dashboard.assignedToMe(currentUserId ?? null),
+  );
 
   const items = data?.items ?? [];
 
   return (
     <Stack gap={1.5}>
       <Stack direction="row" alignItems="center" justifyContent="space-between">
         <Typography variant="subtitle1">Assigned to me</Typography>
-        <Button component={Link} to="/support" variant="text" size="small" disableRipple>
-          View all
-        </Button>
+        <RefreshButton
+          onRefresh={() => void refetch()}
+          isFetching={isFetching}
+          updatedAt={dataUpdatedAt}
+          label="Refresh assigned cases"
+        />
       </Stack>
 
-      {isLoading ? (
+      {isPending ? (
         <Stack gap={1.5}>
           {Array.from({ length: 3 }).map((_, index) => (
             <CaseCardSkeleton key={index} />
@@ -50,7 +55,14 @@ export function AssignedToMeSection() {
       ) : isError ? (
         <ErrorState onRetry={() => void refetch()} />
       ) : items.length === 0 ? (
-        <EmptyState message="No cases assigned to you." />
+        // Lighter than the shared EmptyState (no icon, less padding) — a big "nothing here"
+        // block reads as too prominent for the first thing on the home page — but still boxed
+        // in a card so it's clearly this section's content, not blank/broken-looking space.
+        <Card variant="outlined" sx={{ p: 1.5 }}>
+          <Typography variant="body2" color="text.secondary">
+            No cases assigned to you.
+          </Typography>
+        </Card>
       ) : (
         <Stack gap={1.5}>
           {items.map((item) => (

apps/csm-portal/microapp/src/components/home/RefreshButton.tsx

@@ -0,0 +1,53 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { Box, IconButton, Tooltip, Typography } from "@wso2/oxygen-ui";
+import { RefreshCw } from "@wso2/oxygen-ui-icons-react";
+import { fromNow } from "@utils/dateTime";
+
+interface RefreshButtonProps {
+  /** Re-runs the widget's query. Wire to the react-query `refetch`. */
+  onRefresh: () => void;
+  /** True while a fetch is in flight; disables the control to avoid re-entrancy. */
+  isFetching: boolean;
+  /** react-query `dataUpdatedAt` (ms). When set, shows a "Last refreshed" hint. */
+  updatedAt?: number;
+  /** Accessible label / tooltip, e.g. "Refresh assigned cases". */
+  label: string;
+}
+
+// Reusable dashboard-widget refresh control — mirrors the webapp's RefreshButton
+// (apps/csm-portal/webapp/src/features/csm-dashboard/components/RefreshButton.tsx):
+// icon button + "Last refreshed X ago" hint, so refresh looks and behaves the same across apps.
+export function RefreshButton({ onRefresh, isFetching, updatedAt, label }: RefreshButtonProps) {
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+      {updatedAt ? (
+        <Typography variant="caption" color="text.secondary">
+          Last refreshed {fromNow(new Date(updatedAt))}
+        </Typography>
+      ) : null}
+      <Tooltip title={label}>
+        {/* span wrapper so the tooltip still shows while the button is disabled */}
+        <span>
+          <IconButton size="small" onClick={onRefresh} disabled={isFetching} aria-label={label}>
+            <RefreshCw size={14} />
+          </IconButton>
+        </span>
+      </Tooltip>
+    </Box>
+  );
+}

apps/csm-portal/microapp/src/components/support/CaseCard.tsx

@@ -50,13 +50,13 @@ export function CaseCard({ item }: { item: CaseSummary }) {
         </Stack>
 
         <Stack direction="row" justifyContent="space-between" alignItems="center" mt={0.5}>
-          <Stack direction="row" alignItems="center" gap={0.5}>
+          <Stack direction="row" alignItems="center" gap={0.5} flexShrink={0}>
             <Clock4 size={pxToRem(13)} color={theme.palette.text.secondary} />
             <Typography variant="subtitle2" color="text.secondary" sx={{ fontSize: pxToRem(12) }}>
               Updated {fromNow(item.updatedOn)}
             </Typography>
           </Stack>
-          <Typography variant="subtitle2" color="text.secondary" noWrap>
+          <Typography variant="subtitle2" color="text.secondary" noWrap sx={{ minWidth: 0 }}>
             {item.assignedEngineer?.name ?? "Unassigned"}
           </Typography>
         </Stack>

apps/csm-portal/microapp/src/pages/CaseDetailPage.tsx

@@ -130,10 +130,10 @@ function CaseCommentsSection({ comments }: { comments: Comment[] }) {
       {comments.map((comment) => (
         <Stack key={comment.id} gap={0.5} sx={{ p: 1.5, border: "1px solid", borderColor: "divider", borderRadius: 1 }}>
           <Stack direction="row" justifyContent="space-between" gap={2}>
-            <Typography variant="subtitle2" color="text.secondary" noWrap>
+            <Typography variant="subtitle2" color="text.secondary" noWrap sx={{ minWidth: 0 }}>
               {comment.createdBy}
             </Typography>
-            <Typography variant="subtitle2" color="text.secondary" noWrap>
+            <Typography variant="subtitle2" color="text.secondary" noWrap sx={{ flexShrink: 0 }}>
               {formatDate(comment.createdOn)}
             </Typography>
           </Stack>

apps/csm-portal/microapp/src/pages/MorePage.tsx

@@ -22,6 +22,7 @@ import {
   Clock,
   Megaphone,
   RefreshCw,
+  Settings,
   Shield,
   type LucideIcon,
 } from "@wso2/oxygen-ui-icons-react";