From a8c2cbbf9a739602c2e0b36aa8cfddaebb6b784e Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Wed, 9 Jul 2025 16:29:55 +0300
Subject: [PATCH] Issue #588 - Add mobile scroll icons on dialogs

---
 components/Witnesses/VotersDialog.tsx |  2 +-
 components/ui/table.tsx               | 96 +++++++++++++++------------
 2 files changed, 55 insertions(+), 43 deletions(-)

diff --git a/components/Witnesses/VotersDialog.tsx b/components/Witnesses/VotersDialog.tsx
index 494a2097e..ab49ef975 100644
--- a/components/Witnesses/VotersDialog.tsx
+++ b/components/Witnesses/VotersDialog.tsx
@@ -309,7 +309,7 @@ const VotersDialog: React.FC<VotersDialogProps> = ({
 
                 <div className="relative rounded overflow-hidden w-full">
                   <div className="text-text w-full h-full overflow-auto bg-theme rounded">
-                    <Table enableMobileScrollArrows>
+                    <Table enableMobileScrollArrows isDialog>
                       <TableHeader>
                         <TableRow rowVariant="header">
                           <TableHead stickyLeft>
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index ac04a5f63..0742a7764 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -19,7 +19,7 @@ function getDisplayName(Tag: React.ElementType) {
  *  • Is now RTL-aware
  *  • Applies `right` instead of `left` for sticky positioning in RTL
  *  • Applies `text-right` instead of `text-left` for alignment in RTL
-*/
+ */
 export function withSticky<T extends React.ElementType>(
   Tag: T,
   baseClasses = ""
@@ -82,6 +82,7 @@ const TableContext = React.createContext<TableContextProps>({
 interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   enableMobileScrollArrows?: boolean;
   isStandaloneTable?: boolean;
+  isDialog?: boolean;
 }
 
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
@@ -91,6 +92,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       children,
       enableMobileScrollArrows = false,
       isStandaloneTable = false,
+      isDialog = false,
       ...props
     },
     ref
@@ -104,11 +106,11 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     const isRTL = dir === "rtl";
 
     const handleScroll = React.useCallback(() => {
-        if (!tableRef.current) return;
+      if (!tableRef.current) return;
 
-        const { scrollLeft, scrollWidth, clientWidth } = tableRef.current;
+      const { scrollLeft, scrollWidth, clientWidth } = tableRef.current;
 
-        const atLeftEdge = scrollLeft <= 0;
+      const atLeftEdge = scrollLeft <= 0;
       const atRightEdge = scrollLeft + clientWidth >= scrollWidth - 1;
 
       const shouldShowLeft = scrollLeft > 0 && !atLeftEdge && isTableVisible;
@@ -165,22 +167,38 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
       };
     }, [handleScroll, isStandaloneTable]);
 
-    const arrowStyle =
-      "fixed top-1/2 transform -translate-y-1/2 bg-gray-200 bg-opacity-70 hover:bg-opacity-100 rounded-full p-2 z-20 cursor-pointer text-gray-700";
+    const arrowCommonStyle =
+      "bg-gray-200 bg-opacity-70 hover:bg-opacity-100 rounded-full p-2 z-20 cursor-pointer text-gray-700";
+
+    const arrowConditionalStyle = isDialog
+      ? "absolute"
+      : "fixed top-1/2 transform -translate-y-1/2";
 
-    const LeftArrowIcon = isRTL ? ChevronRight : ChevronLeft;
-    const RightArrowIcon = isRTL ? ChevronLeft : ChevronRight;
+    const PrevArrowIcon = isRTL ? ChevronRight : ChevronLeft;
+    const NextArrowIcon = isRTL ? ChevronLeft : ChevronRight;
+    const prevArrowPosition = isRTL ? "right-2" : "left-2";
+    const nextArrowPosition = isRTL ? "left-2" : "right-2";
 
     return (
       <TableContext.Provider value={{ showLeftArrow, showRightArrow }}>
-        <div
-          className="relative w-full overflow-auto"
-          ref={tableRef}
-        >
-          {enableMobileScrollArrows && showLeftArrow && (
+        <div className="relative">
+          <div className="w-full overflow-auto" ref={tableRef}>
+            <table
+              ref={ref}
+              className={cn(
+                "w-full caption-bottom bg-theme text-xs rounded max-w-full",
+                className
+              )}
+              {...props}
+            >
+              {children}
+            </table>
+          </div>
+
+         {enableMobileScrollArrows && showLeftArrow && (
             <div
-              className={cn(arrowStyle, "left-2")}
-              style={{ top: `45vh` }}
+              className={cn(arrowCommonStyle, arrowConditionalStyle, prevArrowPosition)}
+              style={isDialog ? { top: '10vh' } :  { top: '45vh' }}
               onClick={() => {
                 tableRef.current?.scrollBy({
                   left: isRTL ? 100 : -100,
@@ -188,34 +206,24 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
                 });
               }}
             >
-              <LeftArrowIcon size={20} />
+              <PrevArrowIcon size={20} />
             </div>
           )}
 
           {enableMobileScrollArrows && showRightArrow && (
             <div
-              className={cn(arrowStyle, "right-2")}
-              style={{ top: `45vh` }}
+              className={cn(arrowCommonStyle, arrowConditionalStyle, nextArrowPosition)}
+              style={isDialog ? { top: '10vh' } :  { top: '45vh' }}
               onClick={() => {
-                tableRef.current?.scrollBy({
+                tableRef.current?.scrollBy({ 
                   left: isRTL ? -100 : 100,
-                  behavior: "smooth",
+                  behavior: "smooth" 
                 });
               }}
             >
-              <RightArrowIcon size={20} />
+              <NextArrowIcon size={20} />
             </div>
           )}
-          <table
-            ref={ref}
-            className={cn(
-              "w-full caption-bottom bg-theme text-xs rounded max-w-full",
-              className
-            )}
-            {...props}
-          >
-            {children}
-          </table>
         </div>
       </TableContext.Provider>
     );
@@ -266,17 +274,21 @@ TableFooter.displayName = "TableFooter";
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
   React.HTMLAttributes<HTMLTableRowElement> & { rowVariant?: "body" | "header" }
->(({ className, rowVariant = "body", ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b-2 bg-theme dark:border-gray-700",
-      rowVariants[rowVariant],
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, rowVariant = "body", ...props }, ref) => {
+  const { dir } = useI18n();
+  const isRTL = dir === "rtl";
+  return (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b-2 bg-theme dark:border-gray-700",
+        rowVariants[rowVariant],
+        className
+      )}
+      {...props}
+    />
+  );
+});
 TableRow.displayName = "TableRow";
 
 const TableHead = withSticky(
-- 
GitLab