Clearing visual regressions

[nidhi-kala]

Description

Addressing #736

• SQLite and DuckDB extension text alignment

Before	After

• Bullet Points

Before	After

• No Bars Below Settings Panels on narrow viewports

Before	After

-All input field heights	Before	After

-Settings	Before	After

Checklist

• [x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [x] Changeset

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 06d392513da6b05ad5a22ac2e45a9e8d98e973a8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

| Name | Type | | ------------------------- | ----- | | @evidence-dev/components | Minor | | @evidence-dev/evidence | Major | | evidence-test-environment | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
evidence-development-workspace	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 19, 2023 7:02pm
evidence-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 19, 2023 7:02pm

[vercel[bot]]

@nidhi-kala is attempting to deploy a commit to the Evidence Dev Team on Vercel.

A member of the Team first needs to authorize it.

[nidhi-kala]

@ItsMeBrianD Hi! I resolved the merge conflicts. Let me know if there's anything else that needs to be done. :)

[archiewood]

could you run the code though our (shiny new) formatter and commit the result? pnpm run format

[nidhi-kala]

could you run the code though our (shiny new) formatter and commit the result? pnpm run format

Ofcourse! just did that.

[archiewood]

Hi @nidhi-kala,

Mostly looks great.

• Extension text alignment ✅
• Bullet points ✅
• Bars below settings panels in narrow viewports ✅

A couple of things I noticed:

• Input field heights - while the text input fields are fixed - the dropdown options menu fields are still taller (eg the one where you pick the db connection)
• Settings menu icon - this is still much smaller than in 15.0.1

[nidhi-kala]

@archiewood I fixed the dropdown menu height. Thanks for pointing it out :)

The settings icon were the same dimensions as 15.0.1. these are the dimensions of the settings icon in my branch:

And these are in 15.0.1:

which looks like:

I think 24*24 looks better, let me know if this works:

I will commit the changes shortly!

[archiewood]

Settings menu

While that span may still be at 22px, the icon is definitely smaller visually than it used to be.

15.0.1

main

I think the culprit is the tailwind upgrade, which has overriden the defaults tags using border-box rather than content-box

My suspicion is that we will need to override this for this element

[ItsMeBrianD]

I would attempt to style the svg, rather than .settings-icon using the selector .settings-icon :global(svg), that should let us keep border-box and also style the icon to the precisely correct size.

[nidhi-kala]

I would attempt to style the svg, rather than .settings-icon using the selector .settings-icon :global(svg), that should let us keep border-box and also style the icon to the precisely correct size.

Sounds great. This gives us more control over the icon's size and styling. I'll proceed with this approach and adjust the dimensions. Thanks for the suggestion.

[ItsMeBrianD]

I went ahead and applied this fix to unblock us for the day. I believe that is the last issue we have here

[archiewood]

Thanks @nidhi-kala & @ItsMeBrianD !