Skip to content

Optimization for mobile views and improved styling for chat/assistant sidebar #479

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

Closed
wants to merge 2 commits into from
Closed

Optimization for mobile views and improved styling for chat/assistant sidebar #479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a80e405
⛳ translations
Meteord Sep 2, 2025
e805df5
💄 improve sidebar styling
Meteord Sep 2, 2025
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
719 changes: 504 additions & 215 deletions mucgpt-frontend/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion mucgpt-frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"msw": "2.10.5",
"prettier": "3.6.2",
"typescript": "5.9.2",
"vite": "5.4.19"
"vite": "^7.1.4"
},
Comment on lines +43 to 44
Copy link
Contributor

@coderabbitai coderabbitai bot Sep 10, 2025

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Vite 7 upgrade: verify tooling compatibility and CI node runtime.

  • Check that @vitejs/plugin-react 4.7.0 supports Vite ^7.1.4 and your Node ">=20.0.0" CI image. Consider lockfile regen to surface peer warnings.

If you rely on legacy optimizeDeps/include or assetsInlineLimit defaults from Vite 5, revisit them under Vite 7.

🌐 Web query:

Is @vitejs/plugin-react 4.7.0 compatible with Vite 7.1.x and Node 20? Any breaking changes from Vite 5→7 affecting default config?

💡 Result:

Short answer: Yes — @vitejs/plugin-react 4.7.0 is usable with Vite 7.1.x on Node 20, but require Node >= 20.19 (Vite 7's stated minimum) and you should verify any project-specific config (Sass/postcss/browser targets). [1][2][3]

What to watch for when migrating Vite 5 → 7 (changes that can affect default behavior/config):

  • Node: Vite 7 requires Node 20.19+ (Node 18 dropped). Ensure your runtime meets that. [2]
  • Default browser target: Vite’s default modern target changed (to a "baseline widely available" target), which can change output/transpilation compared to Vite 5. Review build targets if you relied on older defaults. [2]
  • Sass API: Vite moved from the legacy Sass API to the modern API (modern API used by default from v6; legacy support removed in v7). If you relied on the legacy Sass behavior, set css.preprocessorOptions.* (or adjust code). [3]
  • postcss-load-config: upgraded (postcss-load-config v6) and loading TS/YAML configs changed (tsx/jiti & yaml required). If you used TypeScript/YAML PostCSS configs, update loader/setup. [3]
  • Rollup/Rollup-related changes: Vite moved across Rollup versions across majors; library output naming and some Rollup-related defaults changed between earlier majors — check build.lib options if you build libraries. [3][5]

Sources:

  • @vitejs/plugin-react release/registry info (4.7.0 release listed). [1]
  • Vite 7 announcement (Node 20.19+ requirement; default browser target info). [2]
  • Vite migration notes (changes for postcss, Sass, build output, etc.). [3][5]

If you want, I can: 1) check your vite.config for any settings that need updating, or 2) show the exact config snippets to add (e.g., css.preprocessorOptions or browserlist/build.target) to preserve previous behavior.

Ensure Node 20.19+ and regen lockfile for Vite 7 upgrade

  • CI: bump Node runtime to v20.19 or later (Vite 7 minimum).
  • Regenerate lockfile (npm install/pnpm install) to surface peer-dependency warnings for Vite ^7.1.4 and @vitejs/plugin-react 4.7.0.
  • Review Vite 5→7 default-config changes:
    • build.target (default browser targets)
    • Sass API (set css.preprocessorOptions if you relied on legacy behavior)
    • PostCSS loader (TS/YAML config support)
    • Rollup build.lib defaults
🤖 Prompt for AI Agents 
In mucgpt-frontend/package.json around lines 43-44, the project upgraded Vite to
^7.1.4 but the PR did not update the CI Node runtime or regenerate the lockfile;
update CI to use Node v20.19+ (or later), run your package manager install (npm
install / pnpm install) locally to regenerate package-lock.json or
pnpm-lock.yaml and commit the updated lockfile so peer-dependency warnings
surface, and then audit and adjust Vite-related config changes introduced in 5→7
(confirm build.target, update css.preprocessorOptions for any Sass changes,
verify PostCSS loader/config format, and review rollup build.lib defaults)
before merging.

"engines": {
"node": ">=20.0.0"
Expand Down
167 changes: 79 additions & 88 deletions mucgpt-frontend/src/components/AssistantsettingsDrawer/AssistantsettingsDrawer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,22 @@
}

.titleSection {
padding: var(--spacingVerticalM) var(--spacingHorizontalM);
padding: var(--spacingVerticalM, 12px) var(--spacingHorizontalM, 12px);
border-bottom: 1px solid var(--colorNeutralStroke2);
margin-bottom: var(--spacingVerticalS, 8px);
display: flex;
flex-direction: column;
gap: var(--spacingVerticalS, 8px);
}

.assistantTitle {
display: flex;
align-items: center;
gap: var(--spacingHorizontalS, 8px);
font-size: var(--fontSizeBase500);
font-weight: 600;
margin: 0;
color: var(--colorNeutralForeground1);
}

.botTitle {
Expand All @@ -30,20 +44,49 @@
}

.descriptionSection {
padding: var(--spacingVerticalM) var(--spacingHorizontalM);
background-color: var(--colorNeutralBackground1);
padding: var(--spacingVerticalM, 12px) var(--spacingHorizontalM, 12px);
margin-bottom: var(--spacingVerticalS, 8px);
border-radius: var(--borderRadiusMedium, 6px);
border: 1px solid var(--colorNeutralStroke2);
margin-left: var(--spacingHorizontalM, 12px);
margin-right: var(--spacingHorizontalM, 12px);
}

.buttonSection {
padding: var(--spacingVerticalM) var(--spacingHorizontalM);
padding: var(--spacingVerticalS, 8px) var(--spacingHorizontalM, 12px);
display: flex;
gap: var(--spacingHorizontalS);
gap: var(--spacingHorizontalS, 8px);
border-bottom: 1px solid var(--colorNeutralStroke2);
margin-bottom: var(--spacingVerticalS, 8px);
}

.actionButton {
flex: 1;
min-width: 0;
height: 36px;
font-weight: var(--fontWeightSemibold);
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacingHorizontalS, 8px);
border-radius: var(--borderRadiusMedium, 6px);
}

.actionButtonContainer {
flex: 1;
display: flex;
justify-content: flex-start;
}

.minimizeButtonContainer {
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}

.actionButtonContainer button,
.minimizeButtonContainer button {
width: 100%;
}

.publishSection {
Expand All @@ -61,42 +104,46 @@
}

.actionsSection {
padding: 0 var(--spacingHorizontalS, 8px) var(--spacingVerticalM, 12px);
border-bottom: 1px solid var(--colorNeutralStroke2);
}

.actionsHeader {
margin-bottom: 12px;
font-size: var(--fontSizeBase300);
padding: var(--spacingVerticalS, 8px) var(--spacingHorizontalM, 12px);
background-color: var(--colorNeutralBackground2);
border-radius: var(--borderRadiusMedium, 6px);
margin: var(--spacingVerticalXS, 4px) 0;
font-weight: 600;
margin-top: var(--spacingVerticalM, 12px);
font-size: var(--fontSizeBase300);
color: var(--colorNeutralForeground2);
margin-top: var(--spacingVerticalM);
padding: 12px 16px 0;
display: flex;
flex-direction: row;
justify-content: start;
border-bottom: 1px solid var(--colorNeutralStroke2);
padding-bottom: 8px;
cursor: pointer;
user-select: none;
transition: background-color 0.2s ease;
border-bottom: none;
}

.actionsHeader:hover {
background-color: var(--colorNeutralBackground1Hover);
background-color: var(--colorNeutralBackground3);
}

.actionsHeaderContent {
.newChatHeaderContent {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 4px;
border-radius: 4px;
gap: var(--spacingHorizontalS, 8px);
padding: var(--spacingVerticalXS, 4px);
width: 100%;
}

.actionsHeaderContent:hover {
background-color: var(--colorNeutralBackground1Hover);
.actionsHeaderContent {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}

.actionsIcon {
Expand All @@ -107,14 +154,13 @@
.expandCollapseIcon {
margin-left: auto;
color: var(--colorNeutralForeground3);
transition: transform 0.2s ease;
}

.actionsContent {
padding: var(--spacingVerticalM) var(--spacingHorizontalM);
padding: var(--spacingVerticalM, 12px) var(--spacingHorizontalM, 12px);
display: flex;
flex-direction: column;
gap: var(--spacingVerticalS);
gap: var(--spacingVerticalS, 8px);
}

.deleteButton {
Expand All @@ -125,55 +171,21 @@

.deleteButton:hover {
background-color: var(--colorPaletteRedBackground2) !important;
color: var(--colorPaletteRedForeground2) !important;
border-color: var(--colorPaletteRedBorder2) !important;
}

.deleteButton:active {
background-color: var(--colorPaletteRedBackground3) !important;
}

.publishButton {
background: linear-gradient(135deg, var(--colorBrandBackground) 0%, var(--colorBrandBackground2) 100%);
background-color: var(--colorBrandBackground);
color: var(--colorNeutralForegroundOnBrand) !important;
border: 1px solid var(--colorBrandStroke1);
font-weight: var(--fontWeightSemibold);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}

.publishButton::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}

.publishButton:hover {
background: linear-gradient(135deg, var(--colorBrandBackgroundHover) 0%, var(--colorBrandBackground2Hover) 100%);
border-color: var(--colorBrandStroke1Hover);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}

.publishButton:hover::before {
left: 100%;
}

.publishButton:active {
background: linear-gradient(135deg, var(--colorBrandBackgroundPressed) 0%, var(--colorBrandBackground2Pressed) 100%);
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
background-color: var(--colorBrandBackgroundHover);
}

.publishButton:focus-visible {
outline: 2px solid var(--colorStrokeFocus2);
outline: 2px solid var(--colorBrandStroke1);
outline-offset: 2px;
}

Expand All @@ -190,11 +202,8 @@
margin-right: 10px;
}
.markdownDescription {
max-width: calc(var(--sidebarWidth) - 20px);
}

.markdownDescription code {
white-space: wrap;
margin: 0;
overflow-wrap: break-word;
}

.verticalContainer {
Expand Down Expand Up @@ -223,9 +232,12 @@
.actionRow {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
padding-bottom: var(--spacingVerticalS);
justify-content: space-between;
gap: var(--spacingHorizontalS, 8px);
padding: var(--spacingVerticalXS, 4px) 0;
margin-top: var(--spacingVerticalXS, 4px);
width: 100%;
}
.dialog {
width: 100%; /* Breite übernimmt die des Containers (z.B. Dropdown) */
Expand All @@ -252,36 +264,15 @@
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
margin-left: auto;
}

.collapseButton:hover {
background-color: var(--colorNeutralBackground1Hover);
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
border-color: var(--colorNeutralStroke2);
}

.collapseButton:active {
background-color: var(--colorNeutralBackground1Pressed);
color: var(--colorNeutralForeground1);
border-color: var(--colorNeutralStroke3);
}

.collapseButton:focus-visible {
outline: 2px solid var(--colorBrandStroke1);
outline-offset: 2px;
}

.newChatHeaderContent {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 4px;
border-radius: 4px;
width: 100%;
}

.newChatHeaderContent:hover {
background-color: var(--colorNeutralBackground1Hover);
}
Loading
Loading