Improve mobile responsiveness and UI across all sections #3349
Conversation
- Fix vertical text display in textarea on mobile devices - Add responsive design for iPhone SE, XR, 14 Pro Max, and Android devices - Improve table responsiveness with horizontal scroll - Enhance workflows section mobile layout - Textarea now behaves like normal search input - Tested across multiple device sizes and browsers
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
There was a problem hiding this comment.
Important
Looks good to me! 👍
Reviewed everything up to 42eadb2 in 1 minute and 38 seconds. Click for details.
- Reviewed
398lines of code in4files - Skipped
1files when reviewing. - Skipped posting
4draft comments. View those below. - Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.
1. skyvern-frontend/package.json:77
- Draft comment:
The versions for @types/react and @types/react-dom were changed from '^18.2.64' to '^18.2.0'. Please confirm that this deliberate downgrade won’t affect type compatibility. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 10% vs. threshold = 50% This is a dependency-related comment about TypeScript type definitions. Our rules explicitly state not to comment on dependency changes or library versions. Additionally, the comment is asking for confirmation rather than pointing out a definite issue. The actual React version matches the type definitions version now, which might even be more correct. Maybe there could be breaking changes in the type definitions that would cause real issues? The comment might be trying to prevent a regression. While type compatibility is important, this is still fundamentally a dependency version change. Our rules clearly state to not comment on dependency changes or versions we don't recognize. The build system would catch any type incompatibilities. Delete this comment as it violates multiple rules: it's about dependencies, asks for confirmation rather than pointing out a definite issue, and any real problems would be caught by the build.
2. skyvern-frontend/src/index.css:121
- Draft comment:
The mobile responsiveness block uses '!important' on many properties. Consider using more specific selectors or restructuring the CSS to reduce reliance on '!important' for maintainability. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While excessive !important usage is generally considered bad practice in CSS, these appear to be intentionally used to override existing styles for mobile-specific fixes. The consistent pattern and specific targeting suggests this was a deliberate choice to ensure mobile styles take precedence. The comment suggests restructuring but doesn't provide specific guidance on how. The comment may be overlooking that !important could be necessary here to override framework styles or third-party components. Mobile fixes often legitimately need high specificity. While reducing !important usage would be nice, without understanding the full CSS cascade and what styles these need to override, removing them could break mobile functionality. The comment should be deleted as it makes a general suggestion without providing actionable guidance, and the !important usage may be intentional and necessary for mobile fixes.
3. skyvern-frontend/src/routes/workflows/Workflows.module.css:6
- Draft comment:
Mobile-specific styles use '!important' extensively. While this may be necessary to override existing styles, consider if more targeted selectors can be used to improve future maintainability. - Reason this comment was not posted:
Decided after close inspection that this draft comment was likely wrong and/or not actionable: usefulness confidence = 20% vs. threshold = 50% While excessive use of !important is generally considered bad practice, this appears to be a deliberate mobile override stylesheet. The mobile- prefix suggests this is intentionally overriding desktop styles. Without seeing the base styles being overridden, we can't know if more specific selectors would work. The consistent pattern suggests this was an intentional architectural decision. I might be too quick to dismiss a valid concern about CSS maintainability. The use of !important could make future style changes more difficult. However, mobile override stylesheets often need !important to guarantee they take precedence, and the consistent naming convention suggests this is a deliberate pattern rather than a maintainability issue. The comment should be deleted as it questions an apparently intentional architectural decision without having full context of the styling system.
4. skyvern-frontend/src/routes/workflows/Workflows.tsx:116
- Draft comment:
The mobile UI integrations via CSS modules look well integrated. As a minor suggestion, consider memoizing inline event handlers (e.g., handleRowClick, handleIconClick) if performance becomes critical, though this is not an immediate issue. - Reason this comment was not posted:
Confidence changes required:33%<= threshold50%None
Workflow ID: wflow_QnakQ3ES1jlBCdla
You can customize 
|
@jomido for review |
…lve table horizontal over-scrolling with fixed column widths - Fix pagination layout conflicts with items-per-page dropdown - Add responsive CSS patterns to prevent UI overlap on mobile
|
@jomido bump |
WalkthroughAdds mobile-responsive styles across the frontend, introduces CSS modules for Run History and Workflows, and restructures their JSX to use mobile-oriented containers, tables, and pagination. Updates row click navigation targets and accessibility titles. Also adjusts devDependency pins for React type definitions. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant RunHistory as RunHistory UI
participant Router as Client Router
User->>RunHistory: Tap a row
alt Task row
RunHistory->>Router: navigate(/tasks/{task_id}/actions)
else Workflow row
RunHistory->>Router: navigate(/workflows/{workflow_permanent_id}/{workflow_run_id}/overview)
end
sequenceDiagram
autonumber
actor User
participant Workflows as Workflows UI
participant Router as Client Router
User->>Workflows: Tap workflow row
Workflows->>Router: navigate(/workflows/{permanent_id}/{run_id}/overview)
Note over Workflows: Mobile wrappers/table adjust layout only
User->>Workflows: Use pagination/search/actions
Workflows->>Workflows: Update UI state within mobile containers
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
This is the final PR Bugbot will review for you during this billing cycle
Your free Bugbot reviews will reset on November 13
Details
You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.
To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.
| <div className="flex items-center gap-2"> | ||
| <span title="Ran with code"> | ||
| <LightningBoltIcon className="text-[gold]" /> | ||
| </span> |
There was a problem hiding this comment.
Bug: TypeScript Assertion Bypass and Unused Import
The (run as any).script_run assertion bypasses TypeScript's type safety, potentially causing runtime errors if the script_run property is missing from the run object. Additionally, replacing the Tip component with a basic span removes interactive tooltip functionality and leaves an unused import.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
skyvern-frontend/src/index.css (2)
119-201: Reduce reliance on!importantdeclarations.This mobile responsive block applies
!importantto nearly every CSS property (50+ instances). This pattern suggests underlying specificity conflicts that should be resolved through proper CSS architecture rather than force-overriding.Excessive
!importantusage:
- Makes future maintenance and debugging difficult
- Can create specificity wars when styles need adjustment
- Masks the root cause of styling conflicts
- Reduces code maintainability
Consider these approaches:
- Increase selector specificity naturally (e.g.,
body textareainstead oftextarea)- Scope mobile styles within a higher-specificity container
- Use Tailwind's responsive prefixes where possible (
md:,sm:)- Review the source of conflicting styles and adjust their specificity
If Tailwind utilities are the source of conflicts, consider using
@layerto control cascade order or applying mobile classes more selectively in components.
120-120: Minor: Fix comment formatting.The comment has inconsistent spacing (double space after "Fixes").
-/* Mobile Responsiveness Fixes */ +/* Mobile Responsiveness Fixes */skyvern-frontend/src/routes/history/RunHistory.module.css (1)
1-136: Reduce!importantdeclarations and consider extracting shared styles.This CSS module has the same issues as
Workflows.module.css:
Excessive
!importantusage (60+ declarations) - see the detailed comment inWorkflows.module.cssfor approaches to resolve this.Code duplication: Many class definitions are nearly identical between
RunHistory.module.cssandWorkflows.module.css:
.mobileContainer/.mobileMainContainer.mobileTableContainer/.mobileTableWrapper/.mobileTable.mobilePagination- Table cell sizing and overflow handling
Consider creating a shared CSS module for common mobile table styles:
/* shared/mobile-table.module.css */ @media (max-width: 768px) { .container { /* common container styles */ } .tableContainer { /* common table container styles */ } .table { /* common table styles */ } .pagination { /* common pagination styles */ } }Then import and compose in both files:
import sharedStyles from '@/shared/mobile-table.module.css'; import styles from './RunHistory.module.css'; <div className={cn(sharedStyles.container, styles.specificStyles)}>This reduces duplication and ensures consistent mobile behavior across tables.
skyvern-frontend/src/routes/workflows/Workflows.tsx (1)
5-5: Remove unnecessary React import.With React 18 and the new JSX transform, explicitly importing React is no longer required. The build configuration should handle JSX transformation automatically.
Remove the unused import:
-import React from "react"; import { Pagination,If there are specific React APIs being used (e.g.,
React.MouseEvent), those types should be imported explicitly:import type { MouseEvent } from "react";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
skyvern-frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
skyvern-frontend/package.json(1 hunks)skyvern-frontend/src/index.css(1 hunks)skyvern-frontend/src/routes/history/RunHistory.module.css(1 hunks)skyvern-frontend/src/routes/history/RunHistory.tsx(4 hunks)skyvern-frontend/src/routes/workflows/Workflows.module.css(1 hunks)skyvern-frontend/src/routes/workflows/Workflows.tsx(8 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
skyvern-frontend/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
skyvern-frontend/**/*.{ts,tsx}: TypeScript in skyvern-frontend must be linted with ESLint and formatted with Prettier
Enforce a maximum line length of 120 characters in frontend TypeScript files
Files:
skyvern-frontend/src/routes/workflows/Workflows.tsxskyvern-frontend/src/routes/history/RunHistory.tsx
🧬 Code graph analysis (2)
skyvern-frontend/src/routes/workflows/Workflows.tsx (1)
skyvern-frontend/src/util/utils.ts (1)
cn(4-6)
skyvern-frontend/src/routes/history/RunHistory.tsx (4)
skyvern-frontend/src/util/utils.ts (1)
cn(4-6)skyvern-frontend/src/components/StatusBadge.tsx (1)
StatusBadge(35-35)skyvern-frontend/src/util/timeFormat.ts (2)
basicTimeFormat(72-72)basicLocalTimeFormat(71-71)skyvern-frontend/src/components/ui/pagination.tsx (1)
Pagination(118-118)
🔇 Additional comments (5)
skyvern-frontend/src/index.css (1)
129-130: Touch target sizes meet WCAG requirements.The minimum touch target sizes are correctly set to 44px for mobile interactions (line 129:
min-height: 44px, line 142:min-height: 44px), which meets WCAG 2.1 Level AAA guidelines (Target Size 2.5.5).Also applies to: 142-143, 161-163
skyvern-frontend/src/routes/workflows/Workflows.tsx (1)
161-167: Mobile-responsive class application looks good.The use of the
cn()utility to compose Tailwind classes with CSS module classes is appropriate and follows best practices. The mobile-specific containers are consistently applied throughout the component hierarchy.Also applies to: 168-173, 184-184, 199-208, 220-220, 223-223, 230-230, 241-243, 373-373, 398-400
skyvern-frontend/src/routes/history/RunHistory.tsx (3)
103-109: Mobile-responsive styling consistently applied.The CSS module integration follows the same pattern as
Workflows.tsx, with appropriate use ofcn()for class composition. The mobile container hierarchy (mobileContainer → mobileMainContainer → mobileTableContainer → mobileTableWrapper → mobileTable) provides good structure for responsive layouts.Also applies to: 110-110, 117-230, 251-251
180-190: Nice UX enhancement with script run indicator.The gold lightning bolt icon for script runs (
script_run === true) provides clear visual feedback to users about how the workflow was executed. The tooltip "Ran with code" adds helpful context.
157-158: Navigation routes validated
The paths/tasks/:taskId/actionsand/workflows/:workflowPermanentId/:workflowRunId/overvieware defined in src/router.tsx (with TaskActions and WorkflowRunOverview handlers). No existing deep links are affected.
| "@types/react": "^18.2.0", | ||
| "@types/react-dom": "^18.2.0", |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
Verify the necessity of downgrading type definitions.
Downgrading @types/react and @types/react-dom from higher patch versions (^18.2.64 and ^18.2.21) to ^18.2.0 is unusual for dev dependencies. Type definition patches typically add fixes and improvements without breaking changes.
The PR description mentions this is for "compatibility" but doesn't specify what issue this resolves. If there were type errors with the newer versions, those may indicate legitimate type issues in the code that are now being masked.
Please clarify:
- What specific compatibility issue required this downgrade?
- Were there build or type errors with the previous versions?
- Could we address the root cause instead of downgrading?
Run the following to check for any type errors after reverting to the previous versions:
🏁 Script executed:
#!/bin/bash
# Description: Test if there are type errors with newer type definition versions
# Expected: Build completes without errors, or shows specific errors to address
cd skyvern-frontend
# Temporarily upgrade back to check
npm install --save-dev @types/react@^18.2.64 @types/react-dom@^18.2.21
# Run type check
npm run build 2>&1 | tee /tmp/typecheck.log
# Show any errors
if grep -i "error" /tmp/typecheck.log; then
echo "=== Type errors found with newer versions ==="
grep -i "error" /tmp/typecheck.log | head -20
else
echo "=== No type errors found - downgrade may not be necessary ==="
fiLength of output: 812
🏁 Script executed:
#!/bin/bash
cd skyvern-frontend
# Upgrade back to latest patch versions
npm install --save-dev @types/react@latest @types/react-dom@latest
# Run type check and capture output
npm run build > /tmp/typecheck.log 2>&1 || true
# Report any errors
if grep -i "error" /tmp/typecheck.log; then
echo "=== Type errors found with newer versions ==="
grep -i "error" /tmp/typecheck.log | head -20
else
echo "=== No type errors found - downgrade may not be necessary ==="
fiLength of output: 16599
Fix type errors rather than downgrading @types packages.
- FloatingWindow.tsx(459,24): guard
parentBottombefore use. - ui/command.tsx(31,11): align ReactNode import with cmdk’s @types/react.
- RunHistory.tsx: remove unused
Tip. - FlowRenderer.tsx(523,14): adjust ref to
RefObject<HTMLDivElement | null>.
Once these are addressed, restore @types/react and @types/react-dom to the latest patch.
🤖 Prompt for AI Agents
In skyvern-frontend/package.json lines ~79-80 and across the files referenced:
Fix the TypeScript type errors instead of downgrading @types/react and
@types/react-dom; in FloatingWindow.tsx (around line 459) add a null/undefined
guard for parentBottom before it is accessed (e.g., check existence or use
optional chaining) so the value is not used when absent; in ui/command.tsx
(around line 31) import ReactNode in a way compatible with cmdk’s @types/react
(align the import style to the project’s React types, e.g., import type {
ReactNode } from 'react'); in RunHistory.tsx remove the unused Tip identifier
and any associated imports/usages; in FlowRenderer.tsx (around line 523) change
the ref type to RefObject<HTMLDivElement | null> so assignments are type-safe;
after these fixes, restore @types/react and @types/react-dom to the latest patch
versions in package.json.
There was a problem hiding this comment.
Why did you bump the version of these types down? The hare seems to think it's to fix type issues. That's likely the wrong way to go.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| /* Mobile-specific styles for Workflows page */ | ||
| @media (max-width: 768px) { | ||
| .mobileMainContainer { | ||
| padding: 0 1rem !important; | ||
| overflow-x: hidden !important; | ||
| } | ||
|
|
||
| /* Header section */ | ||
| .mobileHeaderContainer { | ||
| flex-direction: column !important; | ||
| height: auto !important; | ||
| gap: 1rem !important; | ||
| margin-bottom: 2rem !important; | ||
| } | ||
|
|
||
| .mobileNarrativeCards { | ||
| flex-direction: column !important; | ||
| gap: 0.75rem !important; | ||
| width: 100% !important; | ||
| margin-top: 1rem !important; | ||
| } | ||
|
|
||
| .mobileNarrativeCards > * { | ||
| width: 100% !important; | ||
| max-width: 100% !important; | ||
| min-width: auto !important; | ||
| font-size: 0.875rem !important; | ||
| padding: 1rem !important; | ||
| } | ||
|
|
||
| .mobileHeaderContent { | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .mobileFlowsSection { | ||
| margin-top: 2rem !important; | ||
| } | ||
|
|
||
| .mobileFlowsHeader { | ||
| margin-bottom: 1rem !important; | ||
| } | ||
|
|
||
| .mobileSearchButtonContainer { | ||
| flex-direction: column !important; | ||
| gap: 1rem !important; | ||
| align-items: stretch !important; | ||
| width: 100% !important; | ||
| } | ||
|
|
||
| .mobileSearchContainer { | ||
| width: 100% !important; | ||
| max-width: 100% !important; | ||
| } | ||
|
|
||
| .mobileSearchInput { | ||
| width: 100% !important; | ||
| max-width: 100% !important; | ||
| min-height: 44px !important; | ||
| font-size: 16px !important; | ||
| box-sizing: border-box !important; | ||
| } | ||
|
|
||
| .mobileButtonContainer { | ||
| display: flex !important; | ||
| gap: 0.75rem !important; | ||
| width: 100% !important; | ||
| justify-content: center !important; | ||
| align-items: center !important; | ||
| } | ||
|
|
||
| .mobileButton { | ||
| min-height: 44px !important; | ||
| font-size: 0.875rem !important; | ||
| padding: 0.75rem 1.5rem !important; | ||
| flex: 0 1 auto !important; | ||
| } | ||
|
|
||
| .mobileButtonContainer > * { | ||
| min-height: 44px !important; | ||
| } | ||
|
|
||
| .mobileTableContainer { | ||
| width: 100% !important; | ||
| margin: 0 !important; | ||
| border-radius: 0.5rem !important; | ||
| overflow: hidden !important; | ||
| } | ||
|
|
||
| .mobileTableWrapper { | ||
| overflow-x: auto !important; | ||
| -webkit-overflow-scrolling: touch !important; | ||
| width: 100% !important; | ||
| max-width: 100vw !important; | ||
| } | ||
|
|
||
| .mobileTable { | ||
| min-width: 100% !important; | ||
| width: 100% !important; | ||
| font-size: 0.875rem !important; | ||
| margin: 0 !important; | ||
| table-layout: fixed !important; | ||
| } | ||
|
|
||
| .mobileTable th, | ||
| .mobileTable td { | ||
| padding: 0.75rem 0.5rem !important; | ||
| font-size: 0.875rem !important; | ||
| white-space: nowrap !important; | ||
| overflow: hidden !important; | ||
| text-overflow: ellipsis !important; | ||
| } | ||
|
|
||
| .mobileTable th { | ||
| font-size: 0.75rem !important; | ||
| font-weight: 600 !important; | ||
| } | ||
|
|
||
| .mobileTable th:nth-child(1), | ||
| .mobileTable td:nth-child(1) { | ||
| width: 80px !important; | ||
| min-width: 80px !important; | ||
| max-width: 80px !important; | ||
| font-size: 0.75rem !important; | ||
| } | ||
|
|
||
| .mobileTable th:nth-child(2), | ||
| .mobileTable td:nth-child(2) { | ||
| width: 40% !important; | ||
| min-width: 120px !important; | ||
| max-width: 150px !important; | ||
| } | ||
|
|
||
| .mobileTable th:nth-child(3), | ||
| .mobileTable td:nth-child(3) { | ||
| width: 100px !important; | ||
| min-width: 100px !important; | ||
| max-width: 100px !important; | ||
| font-size: 0.75rem !important; | ||
| } | ||
|
|
||
| .mobileTable th:nth-child(4), | ||
| .mobileTable td:nth-child(4) { | ||
| width: 120px !important; | ||
| min-width: 120px !important; | ||
| max-width: 120px !important; | ||
| } | ||
|
|
||
| .mobileTableActions button { | ||
| min-height: 40px !important; | ||
| min-width: 40px !important; | ||
| } | ||
|
|
||
| .mobilePagination { | ||
| padding-top: 0 !important; | ||
| width: 100% !important; | ||
| justify-content: center !important; | ||
| margin-top: 1rem !important; | ||
| } | ||
|
|
||
| .mobilePagination button { | ||
| min-height: 44px !important; | ||
| min-width: 44px !important; | ||
| font-size: 0.875rem !important; | ||
| } | ||
|
|
||
| .mobileContainer { | ||
| max-width: 100vw !important; | ||
| overflow-x: hidden !important; | ||
| box-sizing: border-box !important; | ||
| } | ||
|
|
||
| .mobileWorkflowTemplates { | ||
| width: 100% !important; | ||
| overflow-x: hidden !important; | ||
| } | ||
|
|
||
| .mobileTableContainer div[class*="relative px-3 py-3"] { | ||
| position: static !important; | ||
| padding: 1rem !important; | ||
| display: flex !important; | ||
| flex-direction: column !important; | ||
| gap: 1rem !important; | ||
| } | ||
|
|
||
| .mobileTableContainer div[class*="absolute left-3"] { | ||
| position: static !important; | ||
| transform: none !important; | ||
| display: flex !important; | ||
| flex-direction: column !important; | ||
| align-items: center !important; | ||
| text-align: center !important; | ||
| } | ||
|
|
||
| .mobileTableContainer select { | ||
| width: 100% !important; | ||
| max-width: 200px !important; | ||
| min-height: 44px !important; | ||
| font-size: 16px !important; | ||
| text-align: center !important; | ||
| } | ||
|
|
||
| .mobileTableContainer .text-slate-400 { | ||
| font-size: 0.875rem !important; | ||
| text-align: center !important; | ||
| margin-bottom: 0.5rem !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Excessive !important usage in CSS module.
This CSS module contains over 100 !important declarations. CSS Modules already provide scoping through unique class names, so this level of !important usage is unexpected and problematic.
The heavy reliance on !important:
- Suggests conflicts with global styles or Tailwind utilities that should be resolved differently
- Negates the benefits of CSS Module scoping
- Makes it difficult to override these styles when needed (e.g., for themes or variants)
- Creates a maintenance burden
Recommended approaches:
- Review Tailwind conflicts: If fighting Tailwind utilities, apply mobile classes directly in JSX using Tailwind's responsive prefixes (
md:,sm:,lg:) - Increase natural specificity: Use nested selectors or combine with element selectors
- Layer ordering: Ensure CSS module imports come after global styles
- Compose classes: Use the
cn()utility to properly merge Tailwind and module classes
Example refactor:
/* Instead of: */
.mobileButton {
min-height: 44px !important;
font-size: 0.875rem !important;
}
/* Use: */
.mobileButton {
min-height: 44px;
font-size: 0.875rem;
}Then in JSX, ensure module classes are applied after Tailwind classes in the cn() call so they naturally override.
🤖 Prompt for AI Agents
In skyvern-frontend/src/routes/workflows/Workflows.module.css lines 1-207, the
file contains excessive use of !important on virtually every rule which fights
Tailwind/global styles and negates CSS Module scoping; remove the majority of
!important declarations, keep only those that are strictly unavoidable, and
replace overrides by applying responsive Tailwind classes directly in JSX (e.g.,
sm:/md: prefixes) or by increasing selector specificity (nesting or
element+class combos) where needed; ensure the CSS module is imported after
global styles and use the cn() utility to compose module classes with Tailwind
so module rules naturally override without !important.
There was a problem hiding this comment.
Follow the advice from the rabbit, pls. !important has its uses, but you've used it way to much in this PR.
There was a problem hiding this comment.
@jomido Thank you for reinforcing this feedback! The excessive !important usage is indeed a significant concern that should be addressed before merging.
@alina-dvloper, if you need any help implementing the refactoring suggestions I provided earlier (removing !important declarations, using Tailwind responsive prefixes, or increasing selector specificity), feel free to ask. I'm happy to provide specific examples for any parts you're unsure about.
|
Hey, thanks for the submission! Hm the 
The "Items per Page" is extra wide at 
|
4 participants
Problem
BEFORE
AFTER
Solution
writing-mode: horizontal-tbpropertiesFiles Changed
skyvern-frontend/src/index.css- Added mobile-responsive CSSskyvern-frontend/src/routes/workflows/Workflows.tsx- Mobile / Tablet improvements for the workflows pageskyvern-frontend/src/routes/workflows/Workflows.module.css- new Mobile / Tablet styles for the workflows pageTesting Completed
Impact
This PR significantly improves mobile UX for all Skyvern users on mobile/tablet devices, making Skyvern fully usable on all devices.
📱 This PR comprehensively fixes mobile responsiveness issues across the Skyvern frontend, addressing broken UI elements like vertically-displayed text in textareas and unreadable tables on mobile devices. The changes implement responsive design patterns with CSS media queries and component-specific mobile styling to ensure consistent UX across all device sizes from iPhone SE to desktop.
🔍 Detailed Analysis
Key Changes
index.csswith media queries for screens ≤768px, fixing textarea text orientation and input field behaviorWorkflows.module.csswith responsive layouts for headers, search components, tables, and navigation elementsWorkflows.tsxto apply mobile-specific CSS classes using conditional styling withcn()utilityTechnical Implementation
flowchart TD A[Mobile Device Access] --> B[CSS Media Query Detection] B --> C{Screen Width ≤ 768px?} C -->|Yes| D[Apply Mobile Styles] C -->|No| E[Use Default Desktop Styles] D --> F[Fix Textarea Orientation] D --> G[Responsive Table Layout] D --> H[Mobile Button Sizing] D --> I[Single Column Grid] F --> J[Horizontal Text Display] G --> K[Horizontal Scroll for Tables] H --> L[44px Touch Target Size] I --> M[Stacked Layout Elements]Impact
Created with Palmier
Important
Improves mobile responsiveness and UI for the
Workflowssection with CSS adjustments and layout changes.index.cssfor screen sizes up to 768px.Workflows.module.cssfor theWorkflowspage.Workflows.tsxusingstylesfromWorkflows.module.css.textareaandinputfields inindex.css.index.cssandWorkflows.module.css.index.css.@types/reactand@types/react-dominpackage.jsonto version18.2.0.This description was created by
for 42eadb2. You can customize this summary. It will automatically update as commits are pushed.
Summary by CodeRabbit