Overview
The Fat Gantt feature makes dependency lines in JobTread's Gantt view thicker and easier to click. Instead of struggling to precisely click on thin 1.5px lines, you can now easily select dependency lines that are over twice as thick.
Key Features
- Thicker Lines - Dependency lines increased from 1.5px to 3.5px width
- Easier Selection - Much larger click target for selecting dependencies
- Selected Line Visibility - Selected (red) lines are even thicker at 4px
- Smooth Corners - Rounded line caps and joins for a polished look
- Dark Mode Compatible - Enhanced visibility in dark mode with brighter colors
- No Performance Impact - Pure CSS solution with zero overhead
Getting Started
Prerequisites
- JT Power Tools extension installed in Chrome
- Access to a JobTread job with a Gantt schedule view
Enabling the Feature
- Click the JT Power Tools extension icon in your Chrome toolbar
- Find the "Schedule & Calendar" section
- Locate the "Fat Gantt" toggle
- Toggle it ON - the switch will turn blue
- Navigate to any JobTread Gantt view to see the thicker lines
Enabled by Default
Fat Gantt is enabled by default when you install JT Power Tools. If you prefer the original thin lines, you can toggle it off.
How It Works
Visual Comparison
Here's what changes when Fat Gantt is enabled:
| Property |
Before (Default) |
After (Fat Gantt) |
| Line Width |
1.5px |
3.5px |
| Selected Line Width |
1.5px |
4px |
| Line Ends |
Square |
Rounded |
| Click Target |
Tiny |
2x+ Larger |
The Problem It Solves
JobTread's default Gantt dependency lines are just 1.5 pixels wide. This creates several issues:
- Difficult to click precisely on such thin lines
- Frustrating when trying to select dependencies to edit or delete them
- Easy to miss-click and select the wrong element
- Especially challenging on laptops with trackpads
The Solution
Fat Gantt increases line thickness using CSS, making them:
- More visible at a glance
- Much easier to click on the first try
- Clearly distinguished when selected (red lines are thicker)
- Professional-looking with smooth rounded corners
Dark Mode Support
When using Dark Mode, Fat Gantt automatically adjusts the dependency line colors for better visibility:
- Normal Lines - Bright blue (#60a5fa) for excellent contrast
- Selected Lines - Bright red (#f87171) that stands out clearly
Works with Dark Mode
Fat Gantt is fully compatible with the Dark Mode feature. The colors automatically adapt for optimal visibility.
Best Practices
When Fat Gantt Helps Most
- Complex schedules with many task dependencies
- Using a laptop trackpad instead of a mouse
- Working on smaller screens or lower resolution displays
- Projects with overlapping dependency lines
- Quick editing sessions where speed matters
When to Consider Disabling
You might prefer to disable Fat Gantt if:
- You have very dense schedules where thicker lines might feel crowded
- You prefer the original minimal look of JobTread's Gantt view
Compatibility
Works With
- Schedule Task Checkboxes - Check off completed tasks right from the Gantt view
- Dark Mode - Colors automatically adapt for dark theme
- Custom Theme - Compatible with custom color schemes
- All Other Features - No conflicts with any JT Power Tools features
Troubleshooting
Lines Still Look Thin
Solution:
- Verify the feature is enabled in the extension popup
- Refresh the JobTread page (Ctrl/Cmd + R)
- Make sure you're viewing a Gantt schedule (not Month, Week, or Day view)
Lines Not Visible in Dark Mode
Solution:
- Ensure both Fat Gantt and Dark Mode are enabled
- Refresh the page to apply both styles
Feature Not Working After Update
Solution:
- Disable and re-enable the feature in the popup
- Close and reopen JobTread
- Clear browser cache if issues persist
Technical Details
How It's Implemented
Fat Gantt uses CSS injection to modify the SVG path elements that make up dependency lines:
- Targets paths with the
stroke-blue-400 class (normal state)
- Targets paths with the
stroke-red-400 class (selected state)
- Applies
stroke-width, stroke-linecap, and stroke-linejoin properties
CSS Applied
/* Normal dependency lines */
stroke-width: 3.5px;
stroke-linecap: round;
stroke-linejoin: round;
/* Selected dependency lines */
stroke-width: 4px;
Zero Performance Impact
Because Fat Gantt is a pure CSS solution:
- No JavaScript runs when the feature is active
- No DOM observers or event listeners
- Styles are applied instantly by the browser
- Works with any number of dependencies without slowdown
Related Guides