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

Implement more compact chat styles for Canvas view using @container queries #92

Closed
6 tasks done
Tracked by #86
itsmartashub opened this issue Dec 14, 2024 · 0 comments · Fixed by #90
Closed
6 tasks done
Tracked by #86

Implement more compact chat styles for Canvas view using @container queries #92

itsmartashub opened this issue Dec 14, 2024 · 0 comments · Fixed by #90
Assignees
@itsmartashub
Labels
Area: Canvas Customization: Width GPThemes Customization area related to Custom Widths Status: Already Implemented A proposal which has already been implemented before

Comments

@itsmartashub
Copy link
Owner

itsmartashub commented Dec 14, 2024 •
edited
Loading

Enhanced the chat interface with a responsive design when the canvas is opened, utilizing @container queries to adapt the layout based on parent container width at md and sm breakpoints. The changes will make the chats and prompt textarea full width, remove unnecessary elements and spacing, and improve overall readability and visual appeal with more compact design.

  • Applied container queries using @container to implement responsive styles when parent container width is below md or sm breakpoints
  • Converted chats and prompt textarea to full-width layout for better space utilization
  • Removed GPT logo from GPT messages to reduce visual clutter
  • Eliminated excessive padding from and around chat bubbles
  • Reduced border radius values for a more streamlined look
  • Check the behavioour to custom width fn after all of this for canvas view and the basic chats-only
@itsmartashub itsmartashub added Status: WIP Work In Progress Customization: Width GPThemes Customization area related to Custom Widths Area: Canvas labels Dec 14, 2024
@itsmartashub itsmartashub self-assigned this Dec 14, 2024
@itsmartashub itsmartashub mentioned this issue Dec 14, 2024
Closed
11 tasks
itsmartashub added a commit that referenced this issue Dec 15, 2024
@itsmartashub
feat(canvas/chats-@container): implement more compact chat styles for…
54b2b89 
… Canvas view using `@container` queries (#92, #86)

- Applied mobile-like chat styles when the canvas is opened and the parent element of chats and the prompt field is less than `md` or `sm` breakpoint using the new `@container` CSS property
- Made chats and the prompt textarea full width for a more compact and readable layout
- Removed unnecessary elements like the GPT logo, big paddings,big paddings and spacing around, and border radius for a cleaner look

Changes summary:
    - Enhanced chat styles to be more compact and readable when the canvas is opened
    - Made the chats and prompt textarea full width for better visual appeal in the canvas layout.
    - Removed unnecessary elements like the GPT logo, big paddings and spacing around, and border radius to create a cleaner and more readable design
itsmartashub added a commit that referenced this issue Dec 15, 2024
@itsmartashub
fix(canvas/chats-@container): ensure prompt field updates to full-wid…
f9b5588 
…th when canvas is open and on `md` breakpoints (#92, #86)

- Ensure the prompt field updates to full-width when the canvas is open and on `md` breakpoints by updating the @container mixins to the named

Changes summary:
    - Fixed the issue where the prompt field did not update to full-width when the canvas is open and on `md` breakpoints, ensuring consistent layout.
@itsmartashub itsmartashub mentioned this issue Dec 15, 2024
Merged
itsmartashub added a commit that referenced this issue Dec 15, 2024
@itsmartashub
Merge pull request #90 from itsmartashub/feat/canvas
8cf3a59 
[86] Add `Canvas` text and code support

Closes: #86, #88, #89, #91, #92, #93
Still open: #94
@itsmartashub itsmartashub linked a pull request Dec 15, 2024 that will close this issue
[86] Add Canvas text and code support #90
Merged
@itsmartashub itsmartashub added Status: Already Implemented A proposal which has already been implemented before and removed Status: WIP Work In Progress labels Dec 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@itsmartashub itsmartashub

Labels
Area: Canvas Customization: Width GPThemes Customization area related to Custom Widths Status: Already Implemented A proposal which has already been implemented before
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[86] Add Canvas text and code support itsmartashub/GPThemes
1 participant
@itsmartashub