From 432966be65055a730fd6e91f4cb9bd1e81c951e4 Mon Sep 17 00:00:00 2001
From: Mason Hu <mason.hu@canonical.com>
Date: Thu, 8 Feb 2024 10:46:51 +0200
Subject: [PATCH] fix: revert change for table pagination text adjustment on
 small screen

Signed-off-by: Mason Hu <mason.hu@canonical.com>
---
 src/components/TablePagination/utils.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/TablePagination/utils.tsx b/src/components/TablePagination/utils.tsx
index 80606bdf1..2d52f430a 100644
--- a/src/components/TablePagination/utils.tsx
+++ b/src/components/TablePagination/utils.tsx
@@ -7,6 +7,18 @@ import {
   useState,
 } from "react";
 
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+export const figureSmallScreen = () => {
+  const descriptionElement = document.getElementById("pagination-description");
+  if (!descriptionElement) {
+    return true;
+  }
+  return descriptionElement.getBoundingClientRect().width < 230;
+};
+
 /**
  * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
  * for those child components.
@@ -67,7 +79,7 @@ export const useFigureSmallScreen = () => {
   const [isSmallScreen, setSmallScreen] = useState(false);
   useEffect(() => {
     const handleResize = () => {
-      setSmallScreen(window.innerWidth < 620);
+      setSmallScreen(figureSmallScreen());
     };
     window.addEventListener("resize", handleResize);
     return () => {