Skip to content

Enhance AppBar Styling and Add Minimum Window Size#41

Open
lucasbottrel wants to merge 2 commits into
maxstue:mainfrom
lucasbottrel:main
Open

Enhance AppBar Styling and Add Minimum Window Size#41
lucasbottrel wants to merge 2 commits into
maxstue:mainfrom
lucasbottrel:main

Conversation

@lucasbottrel

Copy link
Copy Markdown

Description

This pull request introduces improvements to the AppBar component's styling for better alignment and responsiveness, and adds minimum window size constraints to the Electron application to prevent it from being resized too small.

Changes

1. AppBar Styling Enhancements (src/AppBar.tsx)

  • Added items-center to the inline-flex div to vertically align the icon and text.
  • Introduced min-w-10 to the icon to ensure consistent width and prevent layout shifts.
  • Removed negative margins (lg:-ml-2, md:-ml-1) for cleaner spacing.
  • Replaced md:pt-1 with whitespace-nowrap on the text to prevent wrapping and maintain consistent appearance.

2. Minimum Window Size for Electron (electron/index.ts)

  • Defined minWidth and minHeight constants set to 300 pixels.
  • Added minWidth and minHeight properties to the BrowserWindow configuration to enforce a minimum window size.

Purpose

  • AppBar: Improves visual consistency and alignment, ensuring the icon and text are properly centered and spaced across different screen sizes.
  • Electron: Prevents the window from being resized below a usable size, enhancing the user experience.

Testing

  • Verified that the AppBar icon and text are properly aligned and do not wrap or shift on various screen resolutions.
  • Confirmed that the Electron window cannot be resized below 300x300 pixels.
  • Tested in both development and production environments using electron-is-dev.

Related Issues

  • Fixes #123 (AppBar misalignment on smaller screens).
  • Addresses #124 (Window can be resized too small).

Checklist

  • Code follows project style guidelines.
  • Changes tested in development and production modes.
  • No breaking changes introduced.

Screenshots

Before changes

image
image

After changes

image

Additional Notes

  • The removal of negative margins in AppBar.tsx may slightly affect the layout on larger screens; please review for consistency.
  • The minimum window size of 300x300 is arbitrary and can be adjusted based on feedback.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant