fix(monitor): compact pagination for narrow drift-panel columns

frontend/src/components/common/Pagination/Pagination.css

@@ -53,6 +53,33 @@
   border-color: #0056b3;
 }
 
+/* Keep the Previous/Next direction buttons on a single line. Their icon-text variant
+   renders an icon + a label; in narrow containers (the monitor drift panels, where the
+   pager sits in a ~250px column) the label otherwise wraps under the icon — "Previous"
+   drops to a second row and "Next" gets clipped. */
+.pagination-container .pagination .page-link {
+  white-space: nowrap;
+}
+
+/* The pager nav must never overflow its container. Let the page-number list wrap onto
+   another row instead of spilling past the right edge when the column is too narrow. */
+.pagination-container .pagination {
+  flex-wrap: wrap;
+}
+
+/* Compact mode: the pager lives in a narrow column (monitor drift panels). Stack the
+   "Showing X of Y" line above the nav and pull the padding in so it fits without wrapping. */
+.pagination-container--compact {
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0.5rem 0;
+  gap: 0.5rem;
+}
+
+.pagination-container--compact .pagination-info {
+  font-size: 0.8rem;
+}
+
 /* Responsive adjustments */
 @media (width <= 768px) {
   .pagination-container {

frontend/src/components/common/Pagination/Pagination.tsx

@@ -11,6 +11,12 @@ interface PaginationProps {
   onPageSizeChange?: (pageSize: number) => void;
   pageSizeOptions?: number[];
   showPageSizeSelector?: boolean;
+  /**
+   * Compact mode for narrow containers (e.g. the monitor drift panels, where the pager
+   * sits in a ~250px column). Drops the "Previous"/"Next" text labels for icon-only
+   * direction buttons and shows fewer page numbers so the whole pager fits on one row.
+   */
+  compact?: boolean;
 }
 
 export const Pagination: React.FC<PaginationProps> = ({
@@ -22,6 +28,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   onPageSizeChange,
   pageSizeOptions = [10, 25, 50, 100],
   showPageSizeSelector = true,
+  compact = false,
 }) => {
   if (totalPages === 0) return null;
 
@@ -42,7 +49,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   };
 
   return (
-    <div className="pagination-container">
+    <div className={`pagination-container${compact ? ' pagination-container--compact' : ''}`}>
       <div className="pagination-meta">
         <span className="pagination-info">
           Showing {startItem} to {endItem} of {totalItems} items
@@ -80,10 +87,10 @@ export const Pagination: React.FC<PaginationProps> = ({
           itemsPerPage={pageSize}
           setCurrentPage={setCurrentPage}
           size="sm"
-          limit={5}
+          limit={compact ? 3 : 5}
           ellipsisOn
           ellipsisJump={2}
-          directionVariant="icon-text"
+          directionVariant={compact ? 'icon' : 'icon-text'}
         />
       </div>
     </div>

frontend/src/components/monitor/DeviceDriftPanel/DeviceDriftPanel.tsx

@@ -164,6 +164,7 @@ export const DeviceDriftPanel = ({ snapshots }: DeviceDriftPanelProps) => {
           pageSize={BADGE_PAGE_SIZE}
           onPageChange={setPage}
           showPageSizeSelector={false}
+          compact
         />
       )}
       {absentMacs.length > 0 && (

frontend/src/components/monitor/IpDriftPanel/IpDriftPanel.tsx

@@ -153,6 +153,7 @@ function IpBadgeGroup({
           pageSize={BADGE_GROUP_PAGE_SIZE}
           onPageChange={setPage}
           showPageSizeSelector={false}
+          compact
         />
       )}
     </>

frontend/src/components/monitor/ProtocolDriftPanel/ProtocolDriftPanel.tsx

@@ -103,6 +103,7 @@ function BadgeGroup({
           pageSize={BADGE_GROUP_PAGE_SIZE}
           onPageChange={setPage}
           showPageSizeSelector={false}
+          compact
         />
       )}
     </>