feat: added responsiveness to api keys page

src/components/CardTable.res

@@ -1,9 +1,11 @@
 module TextCard = {
   @react.component
   let make = (~text) => {
-    if String.length(String.trim(text)) > 0 {
+    if text->LogicUtils.isNonEmptyString {
       <p className="break-words font-semibold">
-        {React.string(String.length(String.trim(text)) > 0 ? text : "N/A")}
+        <HelperComponents.EllipsisText
+          endValue=10 displayValue={text->LogicUtils.isNonEmptyString ? text : "N/A"} showCopy=false
+        />
       </p>
     } else {
       React.string("-")

src/components/LoadedTable.res

@@ -896,15 +896,13 @@ let make = (
           <AdvancedSearchModal searchFields url=searchUrl entity />
         </RenderIf>
       }}
-      <DesktopView>
-        {switch tableActions {
-        | Some(actions) =>
-          <LoadedTableContext value={actualData->LoadedTableContext.toInfoData}>
-            <div className=filterBottomPadding> actions </div>
-          </LoadedTableContext>
-        | None => React.null
-        }}
-      </DesktopView>
+      {switch tableActions {
+      | Some(actions) =>
+        <LoadedTableContext value={actualData->LoadedTableContext.toInfoData}>
+          <div className=filterBottomPadding> actions </div>
+        </LoadedTableContext>
+      | None => React.null
+      }}
     </div>
 
   let addDataAttributesClass = if isHighchartLegend {
@@ -988,10 +986,10 @@ let make = (
             : tableDataBackgroundClass}`}>
         paginationUI
         {
-          let topBottomActions = if bottomActions->Option.isSome || !isMobileView {
+          let topBottomActions = if bottomActions->Option.isSome{
             bottomActions
           } else {
-            tableActions
+            None
           }
 
           switch topBottomActions {

src/screens/Developer/APIKeys/KeyManagement.res

@@ -181,14 +181,18 @@ module ApiKeyAddBtn = {
     let (showModal, setShowModal) = React.useState(_ => false)
     let initialValues = Dict.make()
     initialValues->Dict.set("expiration", Never->getStringFromRecordType->JSON.Encode.string)
+    let isMobileView = MatchMedia.useMobileChecker()
+
 
     <>
       <ApiEditModal showModal setShowModal initialValues getAPIKeyDetails />
       <ACLButton
         text="Create New API Key"
         leftIcon={CustomIcon(
           <Icon
-            name="plus" size=12 className="jp-gray-900 fill-opacity-50 dark:jp-gray-text_darktheme"
+            name="plus"
+            size=12
+            className="jp-gray-900 fill-opacity-50 mr-2 mb-1 dark:jp-gray-text_darktheme"
           />,
         )}
         // TODO: Remove `MerchantDetailsManage` permission in future
@@ -197,7 +201,8 @@ module ApiKeyAddBtn = {
           userHasAccess(~groupAccess=AccountManage),
         )}
         buttonType=Secondary
-        buttonSize=Small
+        buttonSize={isMobileView ? XSmall : Small}
+        customTextSize={isMobileView ? "text-xs" : ""}
         onClick={_ => {
           mixpanelEvent(~eventName="create_new_api_key")
           setShowModal(_ => true)
@@ -354,7 +359,7 @@ module ApiKeysTable = {
     <PageLoaderWrapper screenState>
       {<div className="relative mt-10 md:mt-0">
         <h2
-          className="font-bold absolute top-0 md:top-10 left-0 text-xl pb-3 text-black text-opacity-75 dark:text-white dark:text-opacity-75">
+          className="font-bold absolute top-2 md:top-6 left-0 text-xl text-black text-opacity-75 dark:text-white dark:text-opacity-75">
           {"API Keys"->React.string}
         </h2>
         <LoadedTable
@@ -368,7 +373,7 @@ module ApiKeysTable = {
           offset
           setOffset
           currrentFetchCount={data->Array.length}
-          tableActions={<div className="mt-5">
+          tableActions={<div className="mt-0 md:mt-5">
             <ApiKeyAddBtn getAPIKeyDetails />
           </div>}
         />

src/screens/Developer/APIKeys/PublishableAndHashKeySection.res

@@ -37,7 +37,7 @@ let make = () => {
       <div
         className="px-2 py-4 border border-jp-gray-500 dark:border-jp-gray-960 bg-white dark:bg-jp-gray-lightgray_background rounded-md">
         <FormRenderer.DesktopRow>
-          <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1 md:gap-4 mb-4 md:mb-0">
             <div className="flex">
               <div className="break-all text-md text-base text-grey-700 font-semibold">
                 {"Publishable Key"->React.string}
@@ -59,18 +59,18 @@ let make = () => {
             </div>
             <HelperComponents.CopyTextCustomComp
               displayValue={merchantInfo.publishable_key}
-              customTextCss="break-all text-sm font-semibold text-jp-gray-800 text-opacity-75"
+              customTextCss="break-all text-sm truncate md:whitespace-normal font-semibold text-jp-gray-800 text-opacity-75"
               customParentClass="flex items-center gap-5"
             />
           </div>
           <RenderIf condition={paymentResponsHashKey->String.length !== 0}>
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2 md:gap-4">
               <div className="break-all text-md text-base text-grey-700 font-semibold">
                 {"Payment Response Hash Key"->React.string}
               </div>
               <HelperComponents.CopyTextCustomComp
                 displayValue={paymentResponsHashKey}
-                customTextCss="break-all text-sm font-semibold text-jp-gray-800 text-opacity-75"
+                customTextCss="break-all truncate md:whitespace-normal text-sm font-semibold text-jp-gray-800 text-opacity-75"
                 customParentClass="flex items-center gap-5"
               />
             </div>

src/screens/Helpers/HelperComponents.res

@@ -72,11 +72,13 @@ module EllipsisText = {
           <p className="">
             {`${displayValue->String.slice(~start=0, ~end=endValue)}`->React.string}
           </p>
-          <span
-            className={`flex text-blue-811 text-sm font-extrabold ${customTextStyle}`}
-            onClick={ev => handleClick(ev)}>
-            {"..."->React.string}
-          </span>
+          <RenderIf condition={displayValue->String.length > endValue}>
+            <span
+              className={`flex text-blue-811 text-sm font-extrabold ${customTextStyle}`}
+              onClick={ev => handleClick(ev)}>
+              {"..."->React.string}
+            </span>
+          </RenderIf>
         </div>
       </RenderIf>
     </div>