Fix: file-manager and swarm-desktop bugs (#714)

- drive capacity display with stamp polling
- download/upload progress handling
- overlay and tooltip issues
- FileMaganger readme
- ultra-light mode handling
- account feed view page
- download media files
- remove not found syncing link
- fix ultra light node wallet page
- tooltip issues
---------
Co-authored-by: Andrei Mitrea <andrei.mitrea.hq@gmail.com>
Co-authored-by: nidishk <nidishkrishnan45@gmail.com>
Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>
Co-authored-by: Nándor Komlódi <nandor.komlodi@gmail.com>
Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>

src/modules/filemanager/components/Tooltip/Tooltip.scss

@@ -3,6 +3,7 @@
   display: inline-flex;
   align-items: center;
   margin-left: 4px;
+  overflow: visible !important;
 }
 
 .fm-tooltip-wrapper.no-margin {
@@ -39,18 +40,15 @@
   text-align: left;
   border-radius: 6px;
   padding: 8px 12px;
-  position: absolute;
-  z-index: 30;
-  top: 50%;
-  left: calc(100% + 6px);
+  position: fixed;
+  z-index: 9999;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   font-size: 12px;
   line-height: 1.4;
-  font-weight: 400; /* ensure no bold styling */
+  font-weight: 400;
   pointer-events: none;
-  transition: opacity 0.16s ease-in-out, visibility 0.16s ease-in-out, transform 0.16s ease-in-out;
+  transition: opacity 0.16s ease-in-out, visibility 0.16s ease-in-out;
   border: 1px solid rgb(209, 213, 219);
-  transform: translateY(-50%) translateX(4px);
 }
 
 .fm-tooltip-container.bottom {
@@ -61,18 +59,6 @@
   visibility: visible;
   opacity: 1;
   pointer-events: auto;
-  transform: translateY(-50%) translateX(0);
-}
-
-/* Left alignment (flip) when wrapper has .left class */
-.fm-tooltip-wrapper.left .fm-tooltip-container {
-  left: auto;
-  right: calc(100% + 6px);
-  transform: translateY(-50%) translateX(-4px);
-}
-
-.fm-tooltip-wrapper.left:hover .fm-tooltip-container {
-  transform: translateY(-50%) translateX(0);
 }
 
 .fm-inline-label-with-tooltip {

src/modules/filemanager/components/Tooltip/Tooltip.tsx

@@ -22,6 +22,7 @@ export function Tooltip({
   bottomTooltip = false,
 }: TooltipProps): ReactElement {
   const [alignLeft, setAlignLeft] = useState(false)
+  const [position, setPosition] = useState<{ top: number; left?: number; right?: number } | null>(null)
   const wrapperRef = useRef<HTMLSpanElement>(null)
 
   const evaluateAlignment = useCallback(() => {
@@ -33,14 +34,27 @@ export function Tooltip({
     if (!container) return
 
     const wrapperRect = wrapper.getBoundingClientRect()
+
+    const modalContainer = wrapper.closest('.fm-modal-container') as HTMLElement | null
+    let containerOffset = 0
+
+    if (modalContainer) {
+      const containerRect = modalContainer.getBoundingClientRect()
+      containerOffset = containerRect.left
+    }
+
     const tooltipWidth = container.offsetWidth || 0
     const projectedRight = wrapperRect.right + gapPx + tooltipWidth + edgeOffsetPx
     const viewportWidth = window.innerWidth
 
+    const top = wrapperRect.top + wrapperRect.height / 2
+
     if (projectedRight > viewportWidth) {
       setAlignLeft(true)
+      setPosition({ top, right: viewportWidth - wrapperRect.left + gapPx - containerOffset })
     } else {
       setAlignLeft(false)
+      setPosition({ top, left: wrapperRect.right + gapPx - containerOffset })
     }
   }, [edgeOffsetPx, gapPx])
 
@@ -58,6 +72,16 @@ export function Tooltip({
       </span>
       <div
         className={`fm-tooltip-container${bottomTooltip ? ' bottom' : ''}`}
+        style={
+          position
+            ? {
+                top: `${position.top}px`,
+                left: position.left !== undefined ? `${position.left}px` : undefined,
+                right: position.right !== undefined ? `${position.right}px` : undefined,
+                transform: 'translateY(-50%)',
+              }
+            : undefined
+        }
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: label }}
       />