Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fixes: the search button is misplaced #2430

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

fixes: the search button is misplaced #2430

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b38d6ec
fixes #2094: mobile screen responsive fixed overflow
anuragnegi000 Nov 11, 2024
df508dd
Merge branch 'develop' into dev-anurag
anuragnegi000 Nov 11, 2024
a13091d
Merge branch 'develop' into dev-anurag
anuragnegi000 Nov 11, 2024
a392af5
fixes:#2429 the search button is misplaced
anuragnegi000 Nov 12, 2024
17116c4
Merge remote-tracking branch 'origin/dev-anurag' into dev-anurag
anuragnegi000 Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/screens/OrganizationActionItems/OrganizationActionItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useCallback, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Dropdown, Form } from 'react-bootstrap';
import { Navigate, useParams } from 'react-router-dom';
Expand Down Expand Up @@ -88,6 +88,8 @@ function organizationActionItems(): JSX.Element {
return <Navigate to={'/'} replace />;
}

const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768);

const [actionItem, setActionItem] = useState<InterfaceActionItemInfo | null>(
null,
);
Expand All @@ -108,6 +110,14 @@ function organizationActionItems(): JSX.Element {
[ModalState.STATUS]: false,
});

useEffect((): (() => void) => {
const handleResize = (): void => setIsSmallScreen(window.innerWidth <= 768);

window.addEventListener('resize', handleResize);

return (): void => window.removeEventListener('resize', handleResize);
}, []);

const openModal = (modal: ModalState): void =>
setModalState((prevState) => ({ ...prevState, [modal]: true }));

Expand Down Expand Up @@ -405,8 +415,11 @@ function organizationActionItems(): JSX.Element {
/>
<Button
tabIndex={-1}
className={`position-absolute z-10 bottom-0 end-0 d-flex justify-content-center align-items-center`}
style={{ marginBottom: '10px' }}
className="position-absolute z-10 d-flex justify-content-center align-items-center"
style={{
right: isSmallScreen ? '0px' : '0px',
bottom: isSmallScreen ? '10px' : '50px',
}}
data-testid="searchBtn"
Comment on lines +418 to +422
Copy link

@coderabbitai coderabbitai bot Nov 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Move styles to CSS module and use media queries

Instead of using inline styles and JavaScript-based responsive design, consider using CSS modules with media queries for better maintainability and performance.

  1. Add these classes to your CSS module:
.searchButton {
  position: absolute;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 50px;
}

@media (max-width: 768px) {
  .searchButton {
    bottom: 10px;
  }
}
  1. Apply the changes:
-className="position-absolute z-10 d-flex justify-content-center align-items-center"
-style={{
-  right: isSmallScreen ? '0px' : '0px',
-  bottom: isSmallScreen ? '10px' : '50px',
-}}
+className={styles.searchButton}

This approach:

  • Eliminates the need for JavaScript-based responsive design
  • Improves performance by removing inline styles
  • Makes the styling more maintainable
  • Follows CSS best practices

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add code rabbit suggestions in code

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@duplixx, to apply the suggested changes:

  1. Add the CSS styles to your CSS module (e.g., OrganizationActionItems.module.css):

    .searchButton {
  position: absolute;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 50px;
}

@media (max-width: 768px) {
  .searchButton {
    bottom: 10px;
  }
}

  2. Update the Button component in OrganizationActionItems.tsx:

    <Button
  tabIndex={-1}
  className={styles.searchButton}
  data-testid="searchBtn"
>
  <Search />
</Button>

  3. Remove the isSmallScreen state and the associated useEffect hook, since they're no longer needed with the CSS media queries handling the responsiveness.

This refactoring will:

  • Eliminate the need for JavaScript-based responsive design.
  • Improve performance by removing inline styles.
  • Enhance maintainability by keeping styling in CSS modules.
  • Follow CSS best practices.

>
<Search />
Expand Down
Loading