fix:Responsiveness testimonials details #830

techmannih · 2023-11-27T06:20:39Z

Fixes Issue #828

closes #828

Changes proposed

Now, Testimonials section is fully responsive with above of 320px , check my PR and also merged it

Check List (Check all the boxes which are applicable)

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
All new and existing tests passed.
This PR does not contain plagiarized content.
The title of my pull request is a short description of the requested changes.

Screenshots

Add all the screenshots which support your changes

Summary by CodeRabbit

Style
- Improved responsive design for TestimonialCard component, ensuring better layout on medium-sized screens.
- Adjusted width constraints for testimonials to enhance visual presentation across various devices.

coderabbitai · 2023-11-27T06:20:47Z

Walkthrough

The changes involve updating the responsive design of the TestimonialCard and Testimonials components to ensure content fits within the divs on small devices. This was achieved by adding CSS classes to control the maximum width of these components on medium-sized screens, thereby addressing the issue of content overflow on smaller devices.

Changes

File Path	Change Summary
`.../Cards/TestimonialCard.jsx`	Added responsive width classes `max:md:w-72` and `max-md:w-64` to control component and paragraph width.
`.../layout/Testimonials.jsx`	Added a `max-md:w-80` class to limit component width on medium-sized screens.

Assessment against linked issues

Objective	Addressed	Explanation
[#828]: Fix content overflow in Testimonials on small devices	✅	The changes made to the CSS classes address the issue of content overflow by setting maximum widths.

Poem

In the land of code, where divs must be tame,
A rabbit hopped in, fixing layouts its game.
With classes in place, no content shall stray,
Responsive and neat, the divs now will stay. 🐇💻✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ?

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

You can reply to a review comment made by CodeRabbit.
You can tag CodeRabbit on specific lines of code or files in the PR by tagging @coderabbitai in a comment.
You can tag @coderabbitai in a PR comment and ask one-off questions about the PR and the codebase. Use quoted replies to pass the context for follow-up questions.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

coderabbitai

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 6fe126c and 6964bff.

Files selected for processing (2)

src/components/Cards/TestimonialCard.jsx (1 hunks)
src/components/layout/Testimonials.jsx (1 hunks)

Files skipped from review due to trivial changes (1)

src/components/layout/Testimonials.jsx

Additional comments: 1

src/components/Cards/TestimonialCard.jsx (1)

3-3: The class max:md:w-72 may not be correctly formatted. Verify that the CSS framework being used in this project supports this syntax. If it's Tailwind CSS, the correct format should be md:max-w-72.

coderabbitai · 2023-11-27T06:22:28Z

src/components/Cards/TestimonialCard.jsx

      <img
        alt='testimonial'
        className=' mb-2 inline-block h-20 w-20 rounded-full border-2 border-base-100 bg-base-100/10 object-cover object-center'
        src={src}
      />
-      <p className='text-lg'>{description}</p>
+      <p className='text-lg max-md:w-64'>{description}</p>


The class max-md:w-64 appears to be a typo. If this is intended for Tailwind CSS, it should be corrected to md:max-w-64.

- {description} + {description}

Committable suggestion

❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change

{description}

{description}

@techmannih you need to fix this maybe? The max-md class doesn't exist in my knowledge. Also make sure that the UI looks appropriate after you correctly set the class.

Looks like humans are talking. I'll be quiet for now. If you need me again, just tag @coderabbitai in a new comment.

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 6964bff and 5350bbc.

Files selected for processing (1)

src/components/Cards/TestimonialCard.jsx (1 hunks)

Additional comments: 1

src/components/Cards/TestimonialCard.jsx (1)

1-12: The changes to the TestimonialCard component with the addition of responsive classes max:md:w-72 for the card and md:max-w-64 for the description paragraph align with the PR's objective to improve responsiveness on medium-sized screens. These changes should help ensure that the testimonials are displayed properly without overflowing their designated space on various device sizes.

AnuragThePathak · 2023-12-11T11:02:10Z

src/components/Cards/TestimonialCard.jsx

@@ -1,12 +1,12 @@
 const TestimonialCard = ({ src, description, from }) => {
  return (
-    <div className='mb-10 flex h-full w-full flex-col items-center justify-center rounded-lg border border-content/20 bg-gradient-to-br from-content/0 to-content/10 p-4 py-8 text-center lg:flex-1'>
+    <div className='mb-10 flex h-full w-full max:md:w-72 flex-col items-center justify-center rounded-lg border border-content/20 bg-gradient-to-br from-content/0 to-content/10 p-4 py-8 text-center lg:flex-1'>


And this one too.

AnuragThePathak · 2023-12-11T11:03:11Z

src/components/layout/Testimonials.jsx

@@ -32,7 +32,7 @@ const Testimonials = ({
        {tweetId ? (
          <TweetCarousael tweetId={tweetId} setTweetId={setTweetId} />
        ) : (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-4 max-md:w-80'>


Correct it.

when I change this class, code is working locally and this is correct class

github-actions · 2024-02-18T09:48:00Z

Stale pull request message

inclinedadarsh · 2024-02-22T14:11:11Z

Heyy @techmannih
I'll be closing the PR for now, as we are many more commits ahead.
Also, the testimonial section seems pretty much responsive to me already.

Feel free to comment and correct me if I'm wrong. We'll make sure to consider that.
However, I'll have to close the PR for now.

Thank you for your contribution!

fix:responsiveness testimonials details

6964bff

coderabbitai bot reviewed Nov 27, 2023

View reviewed changes

correct class

5350bbc

techmannih force-pushed the testimonials-details branch from 7073206 to 5350bbc Compare December 2, 2023 18:04

coderabbitai bot reviewed Dec 2, 2023

View reviewed changes

AnuragThePathak suggested changes Dec 11, 2023

View reviewed changes

correct tailwindcss class

2ab8081

github-actions bot added the no-pr-activity label Feb 18, 2024

techmannih requested a review from AnuragThePathak February 20, 2024 12:07

github-actions bot removed the no-pr-activity label Feb 21, 2024

inclinedadarsh closed this Feb 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix:Responsiveness testimonials details #830

fix:Responsiveness testimonials details #830

techmannih commented Nov 27, 2023 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 27, 2023 •

edited

Loading

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

coderabbitai bot left a comment

coderabbitai bot Nov 27, 2023 •

edited

Loading

AnuragThePathak Dec 2, 2023

coderabbitai bot Dec 2, 2023

coderabbitai bot left a comment

AnuragThePathak Dec 11, 2023

AnuragThePathak Dec 11, 2023

techmannih Dec 16, 2023 •

edited

Loading

github-actions bot commented Feb 18, 2024

inclinedadarsh commented Feb 22, 2024

	<p className='text-lg max-md:w-64'>{description}</p>
	<p className='text-lg md:max-w-64'>{description}</p>

fix:Responsiveness testimonials details #830

fix:Responsiveness testimonials details #830

Conversation

techmannih commented Nov 27, 2023 • edited by coderabbitai bot Loading

Fixes Issue #828

Changes proposed

Check List (Check all the boxes which are applicable)

Screenshots

Summary by CodeRabbit

coderabbitai bot commented Nov 27, 2023 • edited Loading

Walkthrough

Changes

Assessment against linked issues

Poem

Chat with CodeRabbit Bot (@coderabbitai)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Nov 27, 2023 • edited Loading

Choose a reason for hiding this comment

AnuragThePathak Dec 2, 2023

Choose a reason for hiding this comment

coderabbitai bot Dec 2, 2023

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

AnuragThePathak Dec 11, 2023

Choose a reason for hiding this comment

AnuragThePathak Dec 11, 2023

Choose a reason for hiding this comment

techmannih Dec 16, 2023 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Feb 18, 2024

inclinedadarsh commented Feb 22, 2024

techmannih commented Nov 27, 2023 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Nov 27, 2023 •

edited

Loading

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Configration File (`.coderabbit.yaml`)

coderabbitai bot Nov 27, 2023 •

edited

Loading

techmannih Dec 16, 2023 •

edited

Loading