@oneuptime/common 9.2.26 → 9.3.0

package/UI/Components/Header/IconDropdown/IconDropdownItem.tsx

@@ -18,15 +18,15 @@ const IconDropdown: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <Link
-      className="block py-2 px-4 text-sm text-gray-700 flex hover:bg-gray-100"
+      className="flex items-center gap-3 py-2.5 px-4 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900 transition-colors duration-150 mx-2 rounded-lg"
       to={props.url}
       openInNewTab={props.openInNewTab}
       onClick={props.onClick}
     >
-      <div className="mr-1 h-5 w-5">
+      <div className="flex-shrink-0 h-5 w-5 text-gray-400">
         {props.icon ? <Icon icon={props.icon} /> : <></>}
       </div>
-      <span className="">{props.title}</span>
+      <span className="font-medium">{props.title}</span>
     </Link>
   );
 };

package/UI/Components/Header/IconDropdown/IconDropdownMenu.tsx

@@ -9,7 +9,7 @@ const IconDropdown: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <div
-      className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform opacity-100 scale-100"
+      className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-xl bg-white py-2 shadow-lg ring-1 ring-gray-200 focus:outline-none transform opacity-100 scale-100 animate-in fade-in slide-in-from-top-1 duration-150"
       role="menu"
       aria-orientation="vertical"
       aria-labelledby="user-menu-button"

package/UI/Components/Header/ProjectPicker/CreateNewProjectButton.tsx

@@ -11,19 +11,19 @@ const CreateNewProjectButton: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <li
-      className="text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 bg-gray-100 cursor-pointer hover:bg-gray-200 hover:text-gray-900 text-gray-500 -mb-1"
+      className="relative select-none py-2.5 px-3 mx-2 mt-2 cursor-pointer bg-indigo-50 hover:bg-indigo-100 rounded-lg transition-colors duration-150 border border-indigo-200"
       id="listbox-option-0"
       role="option"
       onClick={() => {
         props.onCreateButtonClicked();
       }}
     >
-      <div className="flex items-center">
+      <div className="flex items-center gap-3">
         <Icon
           icon={IconProp.Add}
-          className="h-6 w-6 flex-shrink-0 rounded-full"
+          className="h-5 w-5 flex-shrink-0 text-indigo-500"
         />
-        <span className="cursor-pointer rounded-md py-2 px-3 inline-flex items-center text-sm font-medium block truncate">
+        <span className="text-sm font-medium text-indigo-600">
           Create New Project
         </span>
       </div>

package/UI/Components/Header/ProjectPicker/ProjectPicker.tsx

@@ -36,14 +36,14 @@ const ProjectPicker: FunctionComponent<ComponentProps> = (
   }, [isComponentVisible]);
 
   return (
-    <div className="w-64 mr-3">
-      <div className="relative mt-3 w-full">
+    <div className="w-64">
+      <div className="relative w-full">
         <button
           onClick={() => {
             setIsComponentVisible(!isDropdownVisible);
           }}
           type="button"
-          className="relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+          className="relative w-full cursor-pointer rounded-lg border border-gray-200 bg-gray-50 py-2.5 pl-3 pr-10 text-left hover:bg-gray-100 hover:border-gray-300 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 sm:text-sm"
           aria-haspopup="listbox"
           aria-expanded="true"
           aria-labelledby="listbox-label"
@@ -51,17 +51,17 @@ const ProjectPicker: FunctionComponent<ComponentProps> = (
           <span className="flex items-center">
             <Icon
               icon={props.selectedProjectIcon}
-              className="h-6 w-6 flex-shrink-0 rounded-full"
+              className="h-5 w-5 flex-shrink-0 text-gray-500"
             />
 
-            <span className="ml-3 block truncate">
+            <span className="ml-2.5 block truncate font-medium text-gray-700">
               {props.selectedProjectName}
             </span>
           </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
             <Icon
               icon={IconProp.UpDownArrow}
-              className="h-5 w-5 text-gray-400"
+              className="h-4 w-4 text-gray-400"
             />
           </span>
         </button>

package/UI/Components/Header/ProjectPicker/ProjectPickerFilterBox.tsx

@@ -9,15 +9,15 @@ const ProjectPickerFilterBox: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className="sm:max-w-xs m-2">
+    <div className="px-2 pb-2 mb-1 border-b border-gray-100">
       <label className="sr-only">Search Projects</label>
       <div className="relative">
         <Input
           onChange={(value: string) => {
             props.onChange(value);
           }}
-          className="block w-full rounded-md border border-gray-300 bg-white py-2 pl-5 pr-3 text-sm placeholder-gray-500 focus:border-indigo-500 focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
-          placeholder="Search Projects"
+          className="block w-full rounded-lg border border-gray-200 bg-gray-50 py-2 pl-4 pr-3 text-sm placeholder-gray-400 focus:border-indigo-500 focus:bg-white focus:text-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 transition-all duration-150 sm:text-sm"
+          placeholder="Search projects..."
         />
       </div>
     </div>

package/UI/Components/Header/ProjectPicker/ProjectPickerMenu.tsx

@@ -11,7 +11,7 @@ const ProjectPickerMenu: FunctionComponent<ComponentProps> = (
 ): ReactElement => {
   return (
     <ul
-      className="absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+      className="absolute z-10 mt-2 max-h-72 w-full overflow-auto rounded-xl bg-white py-2 text-base shadow-lg ring-1 ring-gray-200 focus:outline-none sm:text-sm"
       role="listbox"
       aria-labelledby="listbox-label"
       aria-activedescendant="listbox-option-3"

package/UI/Components/Header/ProjectPicker/ProjectPickerMenuItem.tsx

@@ -19,7 +19,7 @@ const ProjectPickerMenuItem: FunctionComponent<ComponentProps> = (
 
   return (
     <li
-      className="text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 cursor-pointer hover:bg-gray-50"
+      className="text-gray-700 relative select-none py-2.5 px-3 mx-2 cursor-pointer hover:bg-gray-50 rounded-lg transition-colors duration-150"
       id="listbox-option-0"
       role="option"
       onClick={() => {
@@ -27,12 +27,12 @@ const ProjectPickerMenuItem: FunctionComponent<ComponentProps> = (
         Navigation.navigate(route);
       }}
     >
-      <div className="flex items-center">
+      <div className="flex items-center gap-3">
         <Icon
           icon={props.icon}
-          className="h-6 w-6 flex-shrink-0 rounded-full"
+          className="h-5 w-5 flex-shrink-0 text-gray-400"
         />
-        <span className="cursor-pointer text-gray-500 hover:bg-gray-50 hover:text-gray-900 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium block truncate">
+        <span className="text-sm font-medium text-gray-700 truncate">
           {title}
         </span>
       </div>

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -26,69 +26,69 @@ export interface ComponentProps {
 const HeaderAlert: (props: ComponentProps) => ReactElement = (
   props: ComponentProps,
 ): ReactElement => {
-  let textColor: string = "text-indigo-500"; // default color info.
+  let textColor: string = "text-indigo-600";
+  let bgColor: string = "bg-indigo-50";
+  let hoverBgColor: string = "hover:bg-indigo-100";
+  let borderColor: string = "border-indigo-200";
 
   switch (props.alertType) {
     case HeaderAlertType.SUCCESS:
-      textColor = "text-emerald-500 hover:text-emerald-600";
+      textColor = "text-emerald-600";
+      bgColor = "bg-emerald-50";
+      hoverBgColor = "hover:bg-emerald-100";
+      borderColor = "border-emerald-200";
       break;
     case HeaderAlertType.ERROR:
-      textColor = "text-red-500 hover:text-red-600";
+      textColor = "text-red-600";
+      bgColor = "bg-red-50";
+      hoverBgColor = "hover:bg-red-100";
+      borderColor = "border-red-200";
       break;
     case HeaderAlertType.WARNING:
-      textColor = "text-yellow-500 hover:text-yellow-600";
+      textColor = "text-amber-600";
+      bgColor = "bg-amber-50";
+      hoverBgColor = "hover:bg-amber-100";
+      borderColor = "border-amber-200";
       break;
     case HeaderAlertType.INFO:
-      textColor = "text-indigo-500 hover:text-indigo-600";
-      break;
-  }
-
-  let bgColor: string = "bg-gray";
-
-  switch (props.alertType) {
-    case HeaderAlertType.SUCCESS:
-      bgColor = "bg-emerald";
-      break;
-    case HeaderAlertType.ERROR:
-      bgColor = "bg-red";
-      break;
-    case HeaderAlertType.WARNING:
-      bgColor = "bg-yellow";
-      break;
-    case HeaderAlertType.INFO:
-      bgColor = "bg-indigo";
+      textColor = "text-indigo-600";
+      bgColor = "bg-indigo-50";
+      hoverBgColor = "hover:bg-indigo-100";
+      borderColor = "border-indigo-200";
       break;
   }
 
   // color swatch overrides the color.
   if (props.colorSwatch) {
-    textColor = `text-${props.colorSwatch}-500 hover:text-${props.colorSwatch}-600`;
-    bgColor = `bg-${props.colorSwatch}`;
+    textColor = `text-${props.colorSwatch}-600`;
+    bgColor = `bg-${props.colorSwatch}-50`;
+    hoverBgColor = `hover:bg-${props.colorSwatch}-100`;
+    borderColor = `border-${props.colorSwatch}-200`;
   }
 
   const getElement: GetReactElementFunction = (): ReactElement => {
     return (
       <div
-        className={`cursor-pointer ${bgColor}-50 hover:${bgColor}-200 mr-2 ml-2 p-1 h-7 pl-2 pr-2 rounded-full ${props.className}`}
+        className={`cursor-pointer ${bgColor} ${hoverBgColor} border ${borderColor} mx-1 py-1.5 px-3 rounded-lg transition-all duration-150 ${props.className}`}
         onClick={() => {
           props.onClick?.();
         }}
       >
-        <div className="flex">
-          <div className={`flex-shrink-0 mt-0.5 ${textColor}`}>
+        <div className="flex items-center gap-1.5">
+          <div className={`flex-shrink-0 ${textColor}`}>
             <Icon
               icon={props.icon}
               thick={ThickProp.Thick}
-              className={`h-4 w-4 stroke-[3px] font-bold ${textColor}`}
+              className={`h-4 w-4 stroke-[2.5px] ${textColor}`}
             />
           </div>
-          <div className="ml-1 flex-1 md:flex md:justify-between">
-            <p className={`text-sm font-semibold ${textColor}`}>
+          <div className="flex items-center gap-1">
+            <span className={`text-sm font-semibold ${textColor}`}>
               {props.title}
-            </p>
+            </span>
             {props.suffix && (
               <span
-                className={`ml-1 ${textColor} text-sm font-semibold hidden md:block`}
+                className={`${textColor} text-sm font-medium opacity-80 hidden md:block`}
               >
                 {props.suffix}
               </span>

package/UI/Components/HeaderAlert/HeaderAlertGroup.tsx

@@ -26,20 +26,14 @@ const HeaderAlertGroup: (props: ComponentProps) => ReactElement = (
     return <></>;
   }
 
-  // const className: string = "rounded-lg m-3 h-10 pr-0 pl-0 flex border-2 border-gray-200";
-  const className: string = "rounded-lg m-3 mt-5 h-10 pr-0 pl-0 flex";
+  const className: string = "flex items-center gap-1 ml-4";
 
   return (
     <div className={className}>
       {children.map((child: ReactElement | false, index: number) => {
-        // const isLastElement: boolean = index === props.children.length - 1;
-
         return (
           <div key={index} className="flex">
             {child}
-            {/* {!isLastElement && (
-              <div className="border-r-2 border-gray-200"></div>
-            )} */}
           </div>
         );
       })}

package/UI/Components/HiddenText/HiddenText.tsx

@@ -1,5 +1,5 @@
-import CopyableButton from "../CopyableButton/CopyableButton";
-import Icon from "../Icon/Icon";
+import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
 import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement, useState } from "react";
 
@@ -12,44 +12,115 @@ const HiddenText: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [showText, setShowText] = useState<boolean>(false);
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy: () => Promise<void> = async (): Promise<void> => {
+    await navigator.clipboard?.writeText(props.text);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
 
   if (!showText) {
     return (
-      <p
+      <div
         role="hidden-text"
-        className="cursor-pointer underline"
+        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md cursor-pointer transition-all duration-200 bg-gray-50 border border-gray-200 hover:bg-gray-100 hover:border-gray-300 group"
         onClick={() => {
           setShowText(true);
         }}
       >
-        Click here to reveal
-      </p>
+        <Icon
+          icon={IconProp.Lock}
+          size={SizeProp.Small}
+          thick={ThickProp.Thick}
+          className="h-3.5 w-3.5 text-gray-400 group-hover:text-gray-500"
+        />
+        <span className="text-sm text-gray-500 group-hover:text-gray-600">
+          Click to reveal
+        </span>
+        <Icon
+          icon={IconProp.ChevronRight}
+          size={SizeProp.Small}
+          thick={ThickProp.Thick}
+          className="h-3 w-3 text-gray-400 group-hover:text-gray-500 transition-transform duration-200 group-hover:translate-x-0.5"
+        />
+      </div>
     );
   }
 
   return (
-    <div className="flex">
-      <div className="flex">
-        <div
-          style={{
-            marginRight: "5px",
-          }}
-          role="revealed-text"
-        >
-          {props.text}
-        </div>{" "}
-        <Icon
-          icon={IconProp.Hide}
-          className="cursor-pointer text-gray-400 h-4 w-4"
-          data-testid="hide-text-icon"
-          onClick={() => {
-            setShowText(false);
-          }}
-        />
+    <div
+      className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-md transition-all duration-200 ${
+        copied
+          ? "bg-green-50 border border-green-200"
+          : "bg-amber-50 border border-amber-200"
+      }`}
+    >
+      <Icon
+        icon={IconProp.Lock}
+        size={SizeProp.Small}
+        thick={ThickProp.Thick}
+        className={`h-3.5 w-3.5 flex-shrink-0 ${copied ? "text-green-500" : "text-amber-500"}`}
+      />
+      <code
+        role="revealed-text"
+        className={`font-mono text-sm break-all ${copied ? "text-green-700" : "text-amber-800"}`}
+      >
+        {props.text}
+      </code>
+      <div className="flex items-center gap-1 ml-1 flex-shrink-0">
+        {props.isCopyable && (
+          <Tooltip text={copied ? "Copied!" : "Copy"}>
+            <div
+              className={`p-1 rounded cursor-pointer transition-all duration-200 ${
+                copied
+                  ? "text-green-500"
+                  : "text-amber-400 hover:text-amber-600 hover:bg-amber-100"
+              }`}
+              data-testid="copy-to-clipboard-icon"
+              onClick={handleCopy}
+            >
+              {copied ? (
+                <Icon
+                  icon={IconProp.CheckCircle}
+                  size={SizeProp.Small}
+                  thick={ThickProp.Thick}
+                  className="h-3.5 w-3.5"
+                />
+              ) : (
+                <Icon
+                  icon={IconProp.Copy}
+                  size={SizeProp.Small}
+                  thick={ThickProp.Thick}
+                  className="h-3.5 w-3.5"
+                />
+              )}
+            </div>
+          </Tooltip>
+        )}
+        <Tooltip text="Hide">
+          <div
+            className={`p-1 rounded cursor-pointer transition-all duration-200 ${
+              copied
+                ? "text-green-400 hover:text-green-600 hover:bg-green-100"
+                : "text-amber-400 hover:text-amber-600 hover:bg-amber-100"
+            }`}
+            data-testid="hide-text-icon"
+            onClick={() => {
+              setShowText(false);
+            }}
+          >
+            <Icon
+              icon={IconProp.Hide}
+              size={SizeProp.Small}
+              thick={ThickProp.Thick}
+              className="h-3.5 w-3.5"
+            />
+          </div>
+        </Tooltip>
       </div>
-      {props.isCopyable && showText && (
-        <CopyableButton textToBeCopied={props.text} />
-      )}
     </div>
   );
 };

package/UI/Components/Icon/Icon.tsx

@@ -1044,15 +1044,18 @@ const Icon: FunctionComponent<ComponentProps> = ({
     );
   } else if (icon === IconProp.WhatsApp) {
     return getSvgWrapper(
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M26.576 5.363c-2.69-2.69-6.406-4.354-10.511-4.354-8.209 0-14.865 6.655-14.865 14.865 0 2.732 0.737 5.291 2.022 7.491l-0.038-0.070-2.109 7.702 7.879-2.067c2.051 1.139 4.498 1.809 7.102 1.809h0.006c8.209-0.003 14.862-6.659 14.862-14.868 0-4.103-1.662-7.817-4.349-10.507l0 0zM16.062 28.228h-0.005c-0 0-0.001 0-0.001 0-2.319 0-4.489-0.64-6.342-1.753l0.056 0.031-0.451-0.267-4.675 1.227 1.247-4.559-0.294-0.467c-1.185-1.862-1.889-4.131-1.889-6.565 0-6.822 5.531-12.353 12.353-12.353s12.353 5.531 12.353 12.353c0 6.822-5.53 12.353-12.353 12.353h-0zM22.838 18.977c-0.371-0.186-2.197-1.083-2.537-1.208-0.341-0.124-0.589-0.185-0.837 0.187-0.246 0.371-0.958 1.207-1.175 1.455-0.216 0.249-0.434 0.279-0.805 0.094-1.15-0.466-2.138-1.087-2.997-1.852l0.010 0.009c-0.799-0.74-1.484-1.587-2.037-2.521l-0.028-0.052c-0.216-0.371-0.023-0.572 0.162-0.757 0.167-0.166 0.372-0.434 0.557-0.65 0.146-0.179 0.271-0.384 0.366-0.604l0.006-0.017c0.043-0.087 0.068-0.188 0.068-0.296 0-0.131-0.037-0.253-0.101-0.357l0.002 0.003c-0.094-0.186-0.836-2.014-1.145-2.758-0.302-0.724-0.609-0.625-0.836-0.637-0.216-0.010-0.464-0.012-0.712-0.012-0.395 0.010-0.746 0.188-0.988 0.463l-0.001 0.002c-0.802 0.761-1.3 1.834-1.3 3.023 0 0.026 0 0.053 0.001 0.079l-0-0.004c0.131 1.467 0.681 2.784 1.527 3.857l-0.012-0.015c1.604 2.379 3.742 4.282 6.251 5.564l0.094 0.043c0.548 0.248 1.25 0.513 1.968 0.74l0.149 0.041c0.442 0.14 0.951 0.221 1.479 0.221 0.303 0 0.601-0.027 0.889-0.078l-0.031 0.004c1.069-0.223 1.956-0.868 2.497-1.749l0.009-0.017c0.165-0.366 0.261-0.793 0.261-1.242 0-0.185-0.016-0.366-0.047-0.542l0.003 0.019c-0.092-0.155-0.34-0.247-0.712-0.434z"
-      />,
-      {
-        viewBox: "0 0 32 32",
-        strokeWidth: "1.2",
-      },
+      <>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 2C6.48 2 2 6.48 2 12c0 1.77.46 3.43 1.27 4.88L2 22l5.12-1.27C8.57 21.54 10.23 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2z"
+        />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M16.5 14.38c-.25-.13-1.47-.73-1.7-.81-.23-.08-.4-.13-.56.12-.16.25-.64.81-.79.98-.14.17-.29.19-.54.06-.25-.13-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.14-.25-.02-.38.11-.51.11-.11.25-.29.37-.43.12-.15.16-.25.25-.42.08-.17.04-.31-.02-.43-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.17 0-.44.06-.67.31-.23.25-.87.85-.87 2.08 0 1.22.89 2.4 1.02 2.57.12.17 1.75 2.67 4.25 3.74.59.26 1.06.41 1.42.52.6.19 1.14.16 1.57.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.1-.23-.16-.48-.29z"
+        />
+      </>,
     );
   } else if (icon === IconProp.Hide) {
     return getSvgWrapper(

package/UI/Components/InfoCard/InfoCard.tsx

@@ -12,11 +12,15 @@ const InfoCard: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   return (
-    <div className={`rounded-md bg-white shadow p-5 ${props.className || ""}`}>
-      <div>
+    <div
+      className={`rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.className || ""}`}
+    >
+      <div className="mb-2">
         <FieldLabelElement title={props.title} />
       </div>
-      <div className={props.textClassName || ""}>{props.value}</div>
+      <div className={props.textClassName || "text-gray-900"}>
+        {props.value}
+      </div>
     </div>
   );
 };

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -1956,7 +1956,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
 
   return (
     <>
-      <div className="mb-5 mt-5">{getCardComponent()}</div>
+      <div className="">{getCardComponent()}</div>
 
       {showModel ? (
         props.callbacks.showCreateEditModal({

package/UI/Components/ObjectID/ObjectIDView.tsx

@@ -0,0 +1,73 @@
+import Icon, { SizeProp, ThickProp } from "../Icon/Icon";
+import Tooltip from "../Tooltip/Tooltip";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement, useState } from "react";
+
+export interface ComponentProps {
+  objectId: string;
+}
+
+const ObjectIDView: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy: () => Promise<void> = async (): Promise<void> => {
+    await navigator.clipboard?.writeText(props.objectId);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <div
+      className="inline-flex items-center gap-2 group/objectid cursor-pointer"
+      onClick={handleCopy}
+      role="button"
+      tabIndex={0}
+      onKeyDown={async (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" || e.key === " ") {
+          await handleCopy();
+        }
+      }}
+    >
+      <Tooltip text={copied ? "Copied!" : "Click to copy"}>
+        <div
+          className={`inline-flex items-center gap-2 px-2.5 py-1.5 rounded-md font-mono text-sm transition-all duration-200 ${
+            copied
+              ? "bg-green-50 border border-green-200 text-green-700"
+              : "bg-gray-50 border border-gray-200 text-gray-700 hover:bg-gray-100 hover:border-gray-300"
+          }`}
+        >
+          <code className="break-all">{props.objectId}</code>
+          <div
+            className={`flex-shrink-0 transition-all duration-200 ${
+              copied
+                ? "text-green-500"
+                : "text-gray-400 group-hover/objectid:text-gray-600"
+            }`}
+          >
+            {copied ? (
+              <Icon
+                icon={IconProp.CheckCircle}
+                size={SizeProp.Small}
+                thick={ThickProp.Thick}
+                className="h-3.5 w-3.5"
+              />
+            ) : (
+              <Icon
+                icon={IconProp.Copy}
+                size={SizeProp.Small}
+                thick={ThickProp.Thick}
+                className="h-3.5 w-3.5"
+              />
+            )}
+          </div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ObjectIDView;

package/UI/Components/Page/Page.tsx

@@ -96,16 +96,14 @@ const Page: FunctionComponent<ComponentProps> = (
 
       {props.sideMenu && (
         <main className="mx-auto max-w-full pb-10">
-          <div className="lg:grid lg:grid-cols-12 lg:gap-x-5">
+          <div className="flex flex-col md:flex-row md:gap-4 lg:gap-5">
             {props.sideMenu}
 
             {!props.isLoading && (
-              <div className="space-y-6 md:px-6 lg:col-span-10 md:col-span-9 lg:px-0">
-                {props.children}
-              </div>
+              <div className="space-y-6 flex-1 min-w-0">{props.children}</div>
             )}
             {props.isLoading && (
-              <div className="lg:col-span-10 md:col-span-9">
+              <div className="flex-1 min-w-0">
                 <PageLoader isVisible={true} />
               </div>
             )}