fix (organisations): ui shift due to missing min-height (#1441)

Author: paanSinghCoder

web/sdk/admin/views/organizations/details/layout/layout.module.css

@@ -21,6 +21,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: var(--rs-space-11);
 }
 
 .navbar-action-menu-content {
@@ -69,4 +70,4 @@
 
 .nav-chip {
   cursor: pointer;
-}
+}

web/sdk/admin/views/organizations/details/layout/navbar.tsx

@@ -11,6 +11,7 @@ import {
   Spinner,
   getAvatarColor,
   toast,
+  Search
 } from "@raystack/apsara";
 
 import styles from "./layout.module.css";
@@ -20,7 +21,6 @@ import { AddTokensDialog } from "./add-tokens-dialog";
 import type React from "react";
 import { useContext, useState } from "react";
 import { OrganizationContext } from "../contexts/organization-context";
-import { InputField } from "@raystack/apsara";
 import type { Organization } from "@raystack/proton/frontier";
 
 interface navConfig {
@@ -334,10 +334,13 @@ export const OrganizationsDetailsNavabar = ({
       </Flex>
       <Flex align="center" gap={4}>
         {search.isVisible ? (
-          <InputField
+          <Search
             value={search.query}
             onChange={handleSearchChange}
+            onClear={() => search.onChange("")}
             placeholder="Search"
+            size="small"
+            showClearButton
             data-test-id="admin-org-details-navbar-search"
           />
         ) : null}