fix(ui): Margins (#778)

* search and filter/export still wide * line up content above the table, move filter chip above table * fix medium screen padding * fix auto resizing temp * possibly... in between auto sizing fixed? * adjust search bar width to maximize width with additional column button * combine change from main merge conflict * fix filtering buttons margin responsive resizing * move filter chip to align with search component * add og parent div styling * fix filter drawer accordion content padding * move filterchip * fix package details breadcrumb/sidebar padding * remove uncommented code * format code * align breadcrumb margin in package actions page * align banner and justify between instead of gap * fixed breadcrumb package details and package actions styling conflict --------- Co-authored-by: Tiffany Vu <tiffanyvu@itadminss-MacBook-Pro.local> Co-authored-by: Tiffany Vu <tiffanyvu@itadminss-MBP.home>
Enterprise-CMCS · Sep 24, 2024 · 7770c14 · 7770c14
1 parent 4a2a735
commit 7770c14
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 38 deletions.
diff --git a/react-app/src/components/BreadCrumb/BreadCrumb.tsx b/react-app/src/components/BreadCrumb/BreadCrumb.tsx
@@ -81,7 +81,7 @@ export const BreadCrumbBar = ({ children }: React.PropsWithChildren) => {
  <nav
  role="navigation"
  aria-label="breadcrumbs for spa or waiver choices"
- className="m-4"
+ className="my-4"
  >
  <ul className="flex gap-1">{children}</ul>
  </nav>

diff --git a/react-app/src/components/Opensearch/main/Filtering/Drawer/index.tsx b/react-app/src/components/Opensearch/main/Filtering/Drawer/index.tsx
@@ -55,7 +55,7 @@ export const OsFilterDrawer = () => {
  <AccordionTrigger className="underline">
  {PK.label}
  </AccordionTrigger>
- <AccordionContent>
+ <AccordionContent className="px-0">
  {PK.component === "multiSelect" && (
  <F.FilterableSelect
  value={hook.filters[PK.field]?.value as string[]}

diff --git a/react-app/src/components/Opensearch/main/Filtering/index.tsx b/react-app/src/components/Opensearch/main/Filtering/index.tsx
@@ -14,11 +14,11 @@ export const OsFiltering: FC<{
  const context = useOsContext();
 
  return (
- <div className="w-full my-2 max-w-screen-xl self-center">
+ <div className="my-2">
  <p className="mb-1 text-sm">
  {"Search by Package ID, CPOC Name, or Submitter Name"}
  </p>
- <div className="flex w-full md:flex-row flex-col flex-grow content-between gap-2 mb-4">
+ <div className="flex w-full lg:flex-row flex-col flex-grow content-between gap-2">
  <SearchForm
  isSearching={context.isLoading}
  handleSearch={(search) =>
@@ -30,7 +30,7 @@ export const OsFiltering: FC<{
  }
  disabled={!!disabled}
  />
- <div className="flex justify-center flex-row gap-2">
+ <div className="flex flex-wrap justify-center gap-2 max-w-full">
  <VisibilityPopover
  list={columns.filter((COL) => COL.locked === false || COL.field)}
  onItemClick={onToggle}

diff --git a/react-app/src/components/Opensearch/main/Settings/Visibility.tsx b/react-app/src/components/Opensearch/main/Settings/Visibility.tsx
@@ -20,7 +20,7 @@ export const VisibilityPopover = ({
  <UI.PopoverTrigger asChild>
  <UI.Button
  variant="outline"
- className="w-full xs:w-fit min-w-0 whitespace-nowrap hover:bg-transparent self-center h-10 flex gap-2"
+ className="w-full xs:w-fit whitespace-nowrap hover:bg-transparent self-center h-10 flex gap-2"
  >
  <span className="prose-sm">
  {hiddenColumns.length

diff --git a/react-app/src/components/Opensearch/main/index.tsx b/react-app/src/components/Opensearch/main/index.tsx
@@ -5,6 +5,7 @@ import { Pagination } from "@/components/Pagination";
 import { useOsContext } from "./Provider";
 import { useOsUrl } from "./useOpensearch";
 import { OsTableColumn } from "./types";
+import { FilterChips } from "./Filtering";
 
 export const OsMainView: FC<{
  columns: OsTableColumn[];
@@ -30,27 +31,32 @@ export const OsMainView: FC<{
  };
 
  return (
- <section className="flex md:items-stretch items-center flex-col h-[100vh]">
- <OsFiltering onToggle={onToggle} columns={osColumns}/>
- <OsTable onToggle={onToggle} columns={osColumns} />
- <Pagination
- pageNumber={url.state.pagination.number}
- count={context.data?.total?.value || 0}
- pageSize={url.state.pagination.size}
- onPageChange={(number) =>
- url.onSet((s) => ({
- ...s,
- pagination: { ...s.pagination, number },
- }))
- }
- onSizeChange={(size) =>
- url.onSet((s) => ({
- ...s,
- pagination: { number: 0, size },
- }))
- }
- />
- </section>
+ <div className="flex flex-col">
+ <div className="w-full my-2 max-w-screen-xl self-center px-4 lg:px-8">
+ <OsFiltering onToggle={onToggle} columns={osColumns} />
+ <FilterChips />
+ </div>
+ <div className="px-4 lg:px-8">
+ <OsTable onToggle={onToggle} columns={osColumns} />
+ <Pagination
+ pageNumber={url.state.pagination.number}
+ count={context.data?.total?.value || 0}
+ pageSize={url.state.pagination.size}
+ onPageChange={(number) =>
+ url.onSet((s) => ({
+ ...s,
+ pagination: { ...s.pagination, number },
+ }))
+ }
+ onSizeChange={(size) =>
+ url.onSet((s) => ({
+ ...s,
+ pagination: { number: 0, size },
+ }))
+ }
+ />
+ </div>
+ </div>
  );
 };
 

diff --git a/react-app/src/components/SearchForm/index.tsx b/react-app/src/components/SearchForm/index.tsx
@@ -49,7 +49,7 @@ export const SearchForm: FC<{
  <input
  id="searchInput"
  type="text"
- className="w-full md:w-[30rem] py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
+ className="w-full lg:w-[30rem] py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
  maxLength={28}
  value={searchText}
  onChange={handleInputChange}

diff --git a/react-app/src/components/UsaBanner/index.tsx b/react-app/src/components/UsaBanner/index.tsx
@@ -114,7 +114,7 @@ export const UsaBanner = ({ isUserMissingRole }: UsaBannerProps) => {
  )}
 
  {isOpen && (
- <div className="flex flex-col gap-3 px-3 mt-3 sm:flex-row max-w-screen-lg mx-auto pb-4">
+ <div className="flex flex-col justify-between px-4 lg:px-8 mt-3 sm:flex-row max-w-screen-xl mx-auto pb-4">
  <div className="flex gap-2">
  <GovernmentBuildingIcon />
  <p data-testid="official-usage" className="text-sm max-w-md">

diff --git a/react-app/src/features/dashboard/index.tsx b/react-app/src/features/dashboard/index.tsx
@@ -8,7 +8,6 @@ import {
  OsProvider,
  type OsTab,
  useOsData,
- FilterChips,
  FilterDrawerProvider,
  useUserContext,
  Tabs,
@@ -64,10 +63,10 @@ export const Dashboard = () => {
  isLoading: osData.isLoading,
  }}
  >
- <div className="flex flex-col w-full mx-auto px-4 lg:px-8">
+ <div>
  <FilterDrawerProvider>
  {/* Header */}
- <div className="flex w-full self-center max-w-screen-xl xs:flex-row flex-col justify-between py-4">
+  <div className="flex flex-col w-full self-center mx-auto max-w-screen-xl xs:flex-row justify-between p-4 lg:px-8">
  <h1 className="text-xl font-bold mb-4 md:mb-0">Dashboard</h1>
  {!userContext?.isCms && (
  <Link
@@ -96,6 +95,7 @@ export const Dashboard = () => {
  )
  }
  >
+ <div className="flex max-w-screen-xl mx-auto px-4 lg:px-8">
  <TabsList>
  <TabsTrigger value="spas" className="px-6 py-2">
  <h2 className="font-bold text-[1.3em]">SPAs</h2>
@@ -104,12 +104,11 @@ export const Dashboard = () => {
  <h2 className="font-bold text-[1.3em]">Waivers</h2>
  </TabsTrigger>
  </TabsList>
+ </div>
  <TabsContent value="spas">
- <FilterChips />
  <SpasList />
  </TabsContent>
  <TabsContent value="waivers">
- <FilterChips />
  <WaiversList />
  </TabsContent>
  </Tabs>

diff --git a/react-app/src/features/package/index.tsx b/react-app/src/features/package/index.tsx
@@ -65,10 +65,10 @@ export const Details = () => {
  }
 
  return (
- <div className="max-w-screen-xl mx-auto flex flex-col lg:flex-row px-4 lg:px-8">
- <div>
+ <div className="max-w-screen-xl mx-auto flex flex-col lg:flex-row">
+ <div className="px-4 lg:px-8">
  <BreadCrumbs options={detailsAndActionsCrumbs({ id, authority })} />
- <div className="hidden lg:block">
+ <div className="hidden lg:block pr-8">
  <DetailsSidebar id={id} />
  </div>
  </div>
@@ -81,7 +81,7 @@ const DetailsSidebar: FC<{ id: string }> = ({ id }) => {
  const links = useDetailsSidebarLinks(id);
 
  return (
- <aside className="min-w-56 flex-none font-semibold m-4 mt-6 pr-8 pl-4">
+ <aside className="min-w-56 flex-none font-semibold mt-6">
  {links.map(({ id, href, displayName }) => (
  <a className="block mb-2 text-blue-900" key={id} href={href}>
  {displayName}