{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-3-3-grids-and-guides-horizontal-overflow-detection-and-updated-ui/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 3.3: Grids and guides, horizontal overflow detection and updated UI\",\n  \"cover\": \"/blogs/polypane-3-3/rulers.png\",\n  \"date\": \"2020-08-31\",\n  \"noshadow\": true,\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `Add grids and guides to your site, detect which elements cause horizontal overflows, new overlays, a refreshed UI and\nnoticable performance improvements. with over 50 changes there's quite a lot to find in the new Polypane 3.3!`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"grids-and-guides\"\n  }, `Grids and guides`), mdx(\"p\", null, `Polypane 3.3 comes with a new set of tools to make measuring, aligning elements and adhering to a grid system easy and quick.`), mdx(\"img\", {\n    alt: \"Various rulers in Polypane\",\n    src: \"/blogs/polypane-3-3/rulers.png\",\n    style: {\n      maxWidth: '100%'\n    }\n  }), mdx(\"p\", null, `With rulers and guides it's easier than ever to make sure your elements are aligned. With the grid, columns and rows\nfeature you can make sure your website follows your grid system, matches the columns in a design and has the right vertical\nrhythm.`), mdx(\"h2\", {\n    \"id\": \"horizontal-overflow-detection\"\n  }, `Horizontal overflow detection`), mdx(\"p\", null, `Going through the devtools deleting element one by one just to find which element is causing a horizontal overflow?`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Polypane 3.3 radically improves the debugging experience for one of the most annoying front-end bugs there is.`)), mdx(\"div\", {\n    style: {\n      \"position\": \"relative\",\n      \"width\": \"100%\",\n      \"maxWidth\": \"100%\",\n      \"paddingTop\": \"45.2%\"\n    }\n  }, mdx(\"video\", {\n    src: \"/blogs/polypane-3-3/overflow.mp4\",\n    autoPlay: true,\n    loop: true,\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"0px\",\n      \"left\": \"0px\",\n      \"width\": \"100%\",\n      \"maxWidth\": \"100%\",\n      \"height\": \"100%\"\n    }\n  })), mdx(\"p\", null, `Finding elements that cause a horizontal overflow is now as easy as turning debugging on in Polypane. Any element that\ncauses a horizontal scrollbar is automatically colored red.`), mdx(\"p\", null, `As simple as that.`), mdx(\"p\", null, `No more searching, scrolling or deleting\nelements one-by-one in the devtools. Just check which elements are red and fixing those.`), mdx(\"h2\", {\n    \"id\": \"reachability-overlay\"\n  }, `Reachability overlay`), mdx(\"p\", null, `A small new overlay that we've added is the reachability overlay. It shows how easy parts of the screen are to reach when\npeople hold a phone in their hand.`), mdx(\"img\", {\n    alt: \"Reachability overlay\",\n    src: \"/doc-img/overlays/reachability.png\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `As a lefty, I made sure there's also a left-handed version!`)), mdx(\"h2\", {\n    \"id\": \"element-inspector-improvements\"\n  }, `Element inspector improvements`), mdx(\"p\", null, `Since introducing the Polypane element inspector in 3.1, it's steadily become more advanced and more capable. It's a\nunified inspect element that inspects and edits elements in all panes at the same time. Whether it's styling, content or\nattributes, there's no faster way to get info about your elements and edit them.`), mdx(\"p\", null, `In 3.3 we're making it much easier to use.`), mdx(\"p\", null, `With a dedicated button in the header getting element info is just a click away. You can also press the familiar `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `shift + ctrl + c`), `\nshortcut or right-click on any element to inspect it in the panel.`), mdx(\"p\", null, `When you're inspecting we'll show you a lot of interesting information in the tooltip. For example, Polypane displays the\nrendered font (not just the font-stack in the CSS) so you know for sure which font is being rendered. It will also highlight\nif an image has a missing alt attribute (among other attribute checks) and if an element has the right contrast. If that's all\nyou wanted to do, just press `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `esc`), `.`), mdx(\"p\", null, `When you've found an element you want to inspect, click it to show all the details in the elements panel, from where you can\nedit the text content, the styling and the attributes, as well as easily copy the complete style or quickly hide it.`), mdx(\"p\", null, `It's still easy to get to the regular devtools as well, with the devtools button being still there, right-click also having\na \"inspect element in devtools\" option and the new shortcut `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `shift + alt + c`), ` opening devtools in inspect mode.`), mdx(\"p\", null, `But we suspect you'll prefer using the Polypane panel: It's faster, easier to use and edits all panes at the same time.`), mdx(\"h2\", {\n    \"id\": \"ui-updates\"\n  }, `UI updates`), mdx(\"p\", null, `This version of Polypane will look familiar, but we've updated a lot of the UI to improve the rendering on\ndifferent types of screens (1x, retina 2x and also in-between screens like window's 1.25x) and make Polypane easier\nto use and get started with.`), mdx(\"img\", {\n    alt: \"New Icons in Polypane header\",\n    src: \"/blogs/polypane-3-3/ui.png\",\n    className: \"imgshadow\"\n  }), mdx(\"p\", null, `With this update, we also took the opportunity to give Polypane users some more information on what's happening:\nInactive buttons now have a clear X next to them, when the Live CSS feature is active we show a small indicator in the\naddressbar, and while screenshots are generating a notification informs you of this.`), mdx(\"h3\", {\n    \"id\": \"liveauto-reloading-improvements\"\n  }, `Live/auto reloading improvements`), mdx(\"p\", null, `We now show notifications when you start or stop live or auto reloading, especially useful because Polypane will now\nautomatically restart live reloading when you switch to a tab that has it configured. One less thing you need to worry\nabout!`), mdx(\"h2\", {\n    \"id\": \"performance-improvements\"\n  }, `Performance improvements`), mdx(\"p\", null, `We took a good look at everything happening in Polypane and made some significant performance improvements, both in the\nregular mode and in isolated pane mode. These will be most noticable when interacting with websites. Navigating between\npages is now much smoother and will happen `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `near-instant across all panes.`)), mdx(\"p\", null, `We also made performance improvements to our interaction synchronisation. We found some cases where Polypane did too\nmuch work so we simplified those. This has led to faster and more consistent synchronisation of\nclicks and scrolling across a wider variety of websites. Not bad!`), mdx(\"h2\", {\n    \"id\": \"getting-polypane-33\"\n  }, `Getting Polypane 3.3`), mdx(\"p\", null, `Polypane will automatically update on Mac and Windows. Linux users need to download the new version from\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` and if you're on Mac and Windows but don't want to wait on the update popup, you can find\nyour download there as well.`), mdx(\"p\", null, `If you don't have Polypane yet there is a free 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Get it here`), `.`), mdx(\"h2\", {\n    \"id\": \"full-changelog\"\n  }, `Full changelog`), mdx(\"p\", null, `We managed to pack quite the long list of features and improvements into this release, check out the full changelog below. All new features are fully documented in our `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `docs`), ` too.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Rulers, guides, grid, column and row overlays for panes.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Layout debugging overlay highlights elements that cause horizontal overflows.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Reachability overlay to see how easy parts of the screen are to reach.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Inspect element in the element panel is now available in the header and context menus, as well as the inspect element shortcut.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Updated icons, font and design, speed of UI.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Visible scrollbars in workspace for easier navigation.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Updated user agent for better compatibility.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Indicator in address bar when Live CSS is active.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live and autoreloading automatically pause and restart when switching tabs.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Outline panel highlights and scroll to elements when hovered, and opens them in elements panel when clicked.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Faster and more precise interaction syncing.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Panes load new URLs faster and without visible refresh when navigating inside panes.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Show notification when live/auto reloading starts and stops.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Element panel can now increase any number in any value using arrow keys and modifier keys.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Element tooltip shows additional attributes (like `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `role`), `, `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), `, `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `name`), ` and `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `for`), `) and highlight if they're required but missing.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Element tooltip now has a dark mode.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Elements panel supports custom CSS properties with multiple fallback values.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Address bar no longer automatically removes www. from domains.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Isolated panes are now more performant when loading and reloading.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Better support for CSS breakpoint detection in lazy loaded CSS.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Order of color blindness overlays is now consistent.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Active panes now have a blue topbar rather than a blue shadow.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Placeholdifier no longer uses external resources.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Pressing esc now clears focus from inside panes, closes all popovers and clears element selector.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Show notification while screenshot is being generated.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` You can now turn on isolated panes directly from the devtools extension manager.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Update list of available Google Fonts.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` New pane is no longer 100% high.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Restore scroll position in workspace when panes trigger a scroll event.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Bootstrap workspace updated to Bootstrap v5.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Update accessibility panel with latest version of Axe.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Global zoom now supports zooming out to 10%.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated Google SERP rendering.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Color contrast is now precise up to three digits everywhere it's used.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Color contrast overlay shows new ratio when showing preview of new color.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Active overlay is now listed in the Overlay tooltip.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Prevent overlays from crashing browser in certain situations.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Filters are now viewport aware.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Fix issue in color contrast overlay where new color with insufficient contrast was suggested.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Viewport aware toggle in device selector no longer clears the device selector.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Dark mode UI issue in Elements panel.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Full overview screenshot no longer shows blank page in certain situations.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Maximum height for panes in focus mode is now correct.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Trial end reminder is now consistently shown during last week of trial.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Console error indicator is now cleared after page load in isolated panes.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel now escapes any HTML strings in headers.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Cookie date field no longer hides delete button when panel is narrow.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Cr24/CRX3 support for devtools extensions (react devtools was affected).`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Ctrl + scroll to zoom in and out now works again.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Toggling touch events in isolated panes no longer prevents hover effects in the rest of the browser.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Panes resized to device now consistently get the orientation indicated.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Zoom to fit shortcut takes panel into account.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Pane header now animates along with rest of pane during resizing.`)), mdx(\"h2\", {\n    \"id\": \"polypane-331\"\n  }, `Polypane 3.3.1`), mdx(\"p\", null, `This is a bugfix release but it does contain some fun updates and features. Primarily, Polypane now has a view source panel, where you can quickly check the (live) source code of a site. This update also implements support for sites with hash based (#) routing.`), mdx(\"h3\", {\n    \"id\": \"full-changelog-1\"\n  }, `Full changelog:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` HTML Source panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Hash based routing support`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Live CSS now supports all Google Variable font axes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Cookies are now handled better in normal mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` New shortcut `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `cmd/ctrl alt i`), ` to open devtools`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Google SERP layout updates`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Overview screenshots now hides the pane icon bar`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Update Google Fonts list`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` All popovers (like devtools extensions or live reload settings) now also close on `, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `esc`)), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` The elements panel now highlights css properties instead of the values`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Scroll-behaviour is disabled in screenshots and when syncing scroll between panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Polypane now parses CSS from other origins again`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Click syncing now works better for checkboxes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Added \"Start over\" button during license request flow`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Elements panel is no longer opened on page load in Isolate pane mode`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Breakpoint names are no longer hidden in dropdown`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` issue where you couldn't click on the address bar in some places`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent live reloading from opening to many listeners`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Clear live reloading listeners on tab change more persistently`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent reload loop in isolated panes on Windows`)), mdx(\"h2\", {\n    \"id\": \"polypane-332\"\n  }, `Polypane 3.3.2`), mdx(\"p\", null, `Bugfix release.`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Add support for more CSS functions like blur() and saturate() in the Elements panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Now shows \"untitled document\" when title element is missing`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improvement`), ` Updated minimum dimensions of Polypane`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent duplicating site CSS`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent issue where Polypane showed print CSS`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Alignment issue for copy CSS rule button`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Loading indicator now stopf when title element is missing`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":7,"tableOfContents":{"items":[{"url":"#grids-and-guides","title":"Grids and guides"},{"url":"#horizontal-overflow-detection","title":"Horizontal overflow detection"},{"url":"#reachability-overlay","title":"Reachability overlay"},{"url":"#element-inspector-improvements","title":"Element inspector improvements"},{"url":"#ui-updates","title":"UI updates","items":[{"url":"#liveauto-reloading-improvements","title":"Live/auto reloading improvements"}]},{"url":"#performance-improvements","title":"Performance improvements"},{"url":"#getting-polypane-33","title":"Getting Polypane 3.3"},{"url":"#full-changelog","title":"Full changelog"},{"url":"#polypane-331","title":"Polypane 3.3.1","items":[{"url":"#full-changelog-1","title":"Full changelog:"}]},{"url":"#polypane-332","title":"Polypane 3.3.2"}]},"excerpt":"Add grids and guides to your site, detect which elements cause horizontal overflows, new overlays, a refreshed UI and\nnoticable performance improvements. with…","frontmatter":{"title":"Polypane 3.3: Grids and guides, horizontal overflow detection and updated UI","cover":"/blogs/polypane-3-3/rulers.png","date":"2020-08-31","updated":null},"fields":{"slug":"/blog/polypane-3-3-grids-and-guides-horizontal-overflow-detection-and-updated-ui/","date":"2020-08-30T22:00:00.000Z","ogFileName":"polypane-3-3-grids-and-guides-horizontal-overflow-detection-and-updated-ui"}}},"pageContext":{"slug":"/blog/polypane-3-3-grids-and-guides-horizontal-overflow-detection-and-updated-ui/"}},"staticQueryHashes":["4164364741","425175329"]}