GameSetBrick on Desktop - Full Responsive Layout

I built GameSetBrick mobile-first because the most urgent use case - scanning barcodes in a store - happens on a phone. But the reality of managing a LEGO collection is that a lot of the work happens at a desk. You sit down with a laptop, pull up your vault, compare prices across sets, plan your next purchases, and update conditions and purchase prices for recent additions. Doing all of that on a phone screen works, but it is not ideal when you have a 14-inch laptop right in front of you.

That is why GameSetBrick has a full responsive layout that adapts to desktop and laptop screens. This is not a stretched-out phone interface with extra whitespace. The layout genuinely changes at breakpoints to take advantage of larger screens. Navigation moves from bottom to top. Stats expand into multi-column grids. Content areas widen to show more information at a glance. It is the same app with the same data, but the experience shifts to match how you actually use a bigger screen.

If you have only used GameSetBrick on your phone, open it on your laptop. You might be surprised at how different it feels when your collection has room to breathe across a full-width browser window.

The responsive design uses two major breakpoints. The first kicks in at 768 pixels wide, which covers most tablets in landscape mode and smaller laptops. The second activates at 1024 pixels, which covers standard laptops and desktop monitors. Each breakpoint introduces meaningful layout changes, not just minor spacing tweaks.

At 768 pixels and above:

• The bottom navigation bar disappears. In its place, a top navigation bar appears at the top of the screen. This is a fundamental shift in how you move through the app. On mobile, the bottom nav keeps your thumb close to the most important actions. On a larger screen, top navigation is the standard pattern and it frees up vertical space for content below.
• The stats section on your collection and vault pages expands to a four-column layout. On mobile, stats stack vertically or display in a two-column grid. At 768 pixels, you get four stats side by side - total sets, total value, average ROI, and sets near retirement, all visible in a single row without scrolling. This makes the vault dashboard feel like an actual dashboard instead of a scrolling list of numbers.
• The main content container gets wider. On mobile, the container is essentially full width with small margins. At 768 pixels, the container expands but maintains comfortable reading widths. Set cards show more detail inline. List views have more room for price information and status indicators.

At 1024 pixels and above:

• The container widens even further. On a standard 1080p or 1440p monitor, you get generous content areas with proper margins that make the app feel like it belongs on a desktop, not like a mobile app being grudgingly displayed on a big screen.
• Set detail pages lay out beautifully with images, price charts, minifigure lists, and related sets all taking advantage of horizontal space. Information that required scrolling on mobile is often visible all at once on desktop.
• The search interface expands to show more results per row. Instead of a single-column list of search results, you get a grid that lets you scan multiple sets quickly.
• Comparison views, if you are comparing two sets side by side, actually sit side by side instead of stacking vertically.

These are not cosmetic changes. They change how productive you are when managing your collection. Adding ten sets to your vault on a phone is a fine experience. Adding fifty sets during a dedicated collection audit session is dramatically better on a laptop where you can see four stats at a glance, browse a multi-column grid of search results, and navigate with a top bar instead of reaching for the bottom of a phone screen.

This is one of the details I spent the most time on. Mobile apps use bottom navigation because your thumb lives at the bottom of the screen. Reaching to the top of a phone to tap a nav item is ergonomically terrible, which is why every major mobile app puts primary navigation at the bottom. But on a desktop, bottom navigation looks wrong. It fights against decades of web convention where navigation lives at the top of the page.

GameSetBrick handles this by swapping the navigation position based on screen width. Below 768 pixels, you get the familiar bottom navigation bar with icons for Home, Search, Scan, Collection, and Profile. These are thumb-friendly, icon-forward, and fixed to the bottom of the viewport so they are always accessible as you scroll.

At 768 pixels and above, that bottom bar disappears entirely. In its place, a top navigation bar renders across the top of the screen with the same destinations but styled as a horizontal menu. The icons are still there, but text labels are more prominent since you have the horizontal space for them. The navigation feels like a proper web application header instead of a mobile app nav bar.

The transition is seamless. If you resize your browser window - maybe you are running GameSetBrick alongside a spreadsheet where you are tracking purchases - the navigation swaps position as you cross the 768 pixel threshold. There is no page reload, no flash of unstyled content. The layout adjusts in real time, which is how responsive design should work but often does not in practice.

I tested this extensively because getting it wrong would make the desktop experience feel like an afterthought. I opened the app on a 27-inch monitor, a 14-inch laptop, an 11-inch iPad Pro in landscape, and a 10-inch Android tablet. The navigation position and styling feels natural on every screen. That is not an accident - it took multiple iterations to get the breakpoint and styling right for each context.

One detail worth mentioning: on desktop, the navigation also includes hover states that you do not see on mobile for obvious reasons. Hovering over a nav item gives you a subtle visual indicator of which section you are about to enter. Small thing, but it makes the desktop experience feel intentional rather than adapted.

Here is something most people do not expect: the barcode scanner works on desktop. If your laptop has a webcam - and virtually every modern laptop does - you can use it to scan LEGO barcodes just like you would with your phone camera. The scanner is built on html5-qrcode, which accesses whatever camera is available through the browser's media API. On a phone, that is the rear camera. On a laptop, that is the webcam.

Now, I will be honest about the practical limitations. Scanning a barcode with a laptop webcam is not as convenient as scanning with a phone in a store. You need to hold the LEGO box up to your webcam, get the barcode in frame, and keep it steady while the scanner reads it. The webcam is typically lower resolution than a phone camera and the fixed position makes it less flexible. It works, but it is not the primary use case.

Where desktop scanning actually shines is when you are sitting at your desk doing a collection audit. Maybe you have a stack of LEGO boxes next to your desk that you bought over the past month and you are finally getting around to adding them to your vault. Instead of picking up your phone and scanning each one individually, you can open GameSetBrick on your laptop, activate the scanner, and hold each box up to your webcam in sequence. The set details load on your big screen where you can see all the price data, deal scores, and minifigure information at a comfortable size. Then you add the set to your vault with all the details right in front of you on a full-size browser.

If the webcam approach does not work for a particular barcode - maybe the lighting is not great at your desk, or the barcode is on a curve that is hard to angle toward the webcam - the manual entry fallback is always there. Type the set number and you get the same result. On desktop, typing a set number is arguably faster than scanning anyway since you have a full keyboard.

External USB webcams also work. If you have a higher-resolution webcam mounted on your monitor, it will typically do a better job with barcode scanning than a built-in laptop camera. I tested with a Logitech C920 and it picked up barcodes almost as fast as a phone camera. Not a necessary investment for using GameSetBrick on desktop, but worth mentioning if you already have one.

GameSetBrick is a Progressive Web App, which means you can install it to your desktop just like you install it to your phone's home screen. On desktop Chrome - which is where most people will use this feature - the install option appears in the address bar as a small icon or in the three-dot menu under "Install GameSetBrick." Click it, confirm, and the app installs to your desktop with its own window, its own icon in your taskbar or dock, and its own entry in your application launcher.

Once installed as a desktop PWA, GameSetBrick opens in its own window without the browser chrome. No address bar, no tab strip, no bookmark bar taking up space. Just the app in a clean window that you can resize, move to a second monitor, or minimize to your taskbar. It behaves like a native desktop application even though it is running on web technology under the hood.

The benefits of desktop PWA installation go beyond aesthetics:

• Quick launch. Click the icon in your taskbar or dock to open GameSetBrick instantly. No need to open a browser first, navigate to the URL, or find it in your bookmarks. It is right there like any other app on your computer.
• Own window. The app gets its own window in your operating system's window manager. You can Alt+Tab to it on Windows or Command+Tab to it on Mac. You can snap it to half your screen alongside a spreadsheet or BrickLink tab. It lives independently of your browser tabs.
• Offline capability. The PWA caches essential resources for offline use. Your vault data is available even without an internet connection. Market prices require connectivity to refresh, but your collection inventory, wishlist, and minifigure data are accessible offline.
• Automatic updates. Unlike a native app from an app store, the PWA updates automatically whenever you open it and there is a new version available. No update notifications, no manual downloads, no version management. You always get the latest features and fixes.

The install process works on Chrome, Edge, and other Chromium-based browsers on Windows, Mac, and Linux. Firefox and Safari handle PWAs differently on desktop - Firefox does not currently support desktop PWA installation, and Safari on Mac has its own approach. Chrome is the most reliable path for desktop installation and it is what I recommend if you want the native app experience on your laptop or desktop.

Let me paint the picture of what a desktop collection management session looks like, because it is genuinely a different experience from using the app on your phone.

You open GameSetBrick on your laptop - either from the installed PWA icon or by navigating to the site in your browser. The top navigation bar shows you all five sections at a glance. You click Collection and your vault loads with the four-column stats dashboard across the top. Total sets, total value, average ROI, and retirement alerts, all visible without scrolling.

Below the stats, your sets display in a grid layout that takes advantage of horizontal space. On a 1080p monitor, you might see three or four sets per row. On a 1440p or ultrawide monitor, even more. Each set card shows the image, name, current value, and your ROI at a glance. You can scan your entire collection visually in a few seconds of scrolling instead of the longer scroll required on a phone's single-column layout.

You click into a set to see its detail page. On desktop, the set image, price information, minifigure list, and market data all have room to display comfortably. Price trends, deal scores, and related sets do not feel cramped. The information density is higher without being cluttered because the screen simply has more real estate to work with.

Maybe you decide to add some new sets. You click Search in the top nav, type a set number or name, and the results appear in a multi-column grid. You can rapidly scan through results, click into promising sets, check prices, and add them to your vault or wishlist. The keyboard-driven workflow of searching by typing and navigating with clicks is naturally faster on desktop than tapping and scrolling on mobile.

If you want to do a full collection audit, you can open GameSetBrick in one half of your screen and a spreadsheet in the other half. Export your vault CSV, open it in Sheets or Excel, and cross-reference against your physical inventory. The side-by-side workflow is something that simply is not possible on a phone and it makes serious collection management significantly more efficient.

The desktop experience is not replacing the mobile experience. They serve different purposes. Mobile is for in-store scanning, quick lookups, and on-the-go wishlist management. Desktop is for collection administration, deep price analysis, and the kind of focused session where you sit down and really work with your data. GameSetBrick gives you both, on the same account, with the same data synced across devices.

• Best LEGO Barcode Scanner App
• Scanner Tips and Bulk Scan Mode
• Best Free LEGO Tools for Collectors
• How to Export and Delete Your GameSetBrick Data
• Share Your LEGO Vault and Wishlist