Tiles view: +/- control for cards per row

Adjusts the tile grid's column count as an offset from the existing
width-based auto-fill default, shared across Library, Decks, Card search,
and set card lists. Clicking the count resets to the default.

src/views/NewsView.tsx

@@ -6,8 +6,10 @@ import {
   CardTile,
   ColorToggles,
   QtyStepper,
+  TileColumnsControl,
   applyCardCriteria,
   useCardCriteria,
+  useTileColumns,
 } from "../components";
 import { useBackButton } from "../backButton";
 
@@ -75,6 +77,7 @@ export function NewsView() {
   // doing nothing. Null while we work out which.
   const [source, setSource] = useState<"local" | "live" | null>(null);
   const [cardsError, setCardsError] = useState<string | null>(null);
+  const tiles = useTileColumns();
   // The same criteria the Library and Card Search panels use — the set browser
   // runs through search_reference rather than its own path, so every filter
   // works here identically instead of being reimplemented.
@@ -197,6 +200,7 @@ export function NewsView() {
             {cards && <span className="badge">{cards.length}</span>}
           </h2>
           <div className="page-header-actions">
+            <TileColumnsControl tiles={tiles} />
             <button onClick={() => setOpenSet(null)}>← Back to news</button>
           </div>
         </div>
@@ -253,7 +257,7 @@ export function NewsView() {
               : "No cards listed for this set yet."}
           </p>
         ) : (
-          <div className="tile-grid" style={{ marginTop: "var(--space-4)" }}>
+          <div {...tiles.gridProps} style={{ ...tiles.gridProps.style, marginTop: "var(--space-4)" }}>
             {cards.map((c) => (
               <CardTile
                 key={c.oracle_id}