scrabble-solver 2.17.0 → 2.18.0

package/packages/scrabble-solver/src/components/Progress/Progress.module.scss

@@ -2,6 +2,13 @@
   width: 100%;
   min-height: 1px;
   border-radius: var(--border--radius);
+  background-image: linear-gradient(
+    90deg,
+    var(--color--progress) 0%,
+    var(--color--progress) var(--progress),
+    var(--color--progress--background) var(--progress),
+    var(--color--progress--background) 100%
+  );
 
   [dir='rtl'] & {
     transform: scaleX(-1);

package/packages/scrabble-solver/src/components/Progress/Progress.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly progress: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Progress/Progress.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
-import { type FunctionComponent, type HTMLProps } from 'react';
+import { type CSSProperties, type FunctionComponent, type HTMLProps } from 'react';
 
-import { PROGRESS_COLOR_BACKGROUND, PROGRESS_COLOR_VALUE } from '@/parameters';
 import { selectLocale, useTypedSelector } from '@/state';
 
 import styles from './Progress.module.scss';
@@ -12,11 +11,6 @@ interface Props extends HTMLProps<HTMLDivElement> {
   value: number;
 }
 
-const getGradient = (progress: number, color: string, background: string) => {
-  const percent = 100 * progress;
-  return `linear-gradient(90deg, ${color} 0%, ${color} ${percent}%, ${background} ${percent}%, ${background} 100%)`;
-};
-
 export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
   const locale = useTypedSelector(selectLocale);
   const progress = value / (max - min);
@@ -31,10 +25,7 @@ export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, st
       aria-valuetext={`${percent.toLocaleString(locale)}%`}
       className={classNames(styles.progress, className)}
       role="progressbar"
-      style={{
-        ...style,
-        backgroundImage: getGradient(progress, PROGRESS_COLOR_VALUE, PROGRESS_COLOR_BACKGROUND),
-      }}
+      style={{ ...style, '--progress': `${100 * progress}%` } as CSSProperties}
       title={`${percent.toLocaleString(locale)}%`}
     />
   );

package/packages/scrabble-solver/src/components/Rack/Rack.module.scss

@@ -65,12 +65,15 @@
 }
 
 .rack {
+  --tile-size: var(--rack-tile-size);
+
   position: relative;
   display: flex;
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   transition: var(--transition);
   opacity: 1;
+  font-size: max(14px, calc(var(--rack-tile-size) * 0.6));
 }
 
 .tile {

package/packages/scrabble-solver/src/components/Rack/Rack.module.scss.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly hidden: string;
+  readonly rack: string;
+  readonly sharpLeft: string;
+  readonly sharpRight: string;
+  readonly tile: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Rack/Rack.tsx

@@ -16,9 +16,11 @@ import {
 import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
-import { LOCALE_FEATURES } from '@/i18n';
-import { createKeyboardNavigation, extractCharacters, extractInputValue, getTileSizes, isCtrl } from '@/lib';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from '@/state';
 
 import { InputPrompt, RackTile } from './components';
@@ -27,12 +29,10 @@ import { selectRemainingTilesGroups } from './selectors';
 
 interface Props {
   className?: string;
-  tileSize: number;
 }
 
-export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
+export const Rack: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
-  const { rackHeight } = useAppLayout();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
@@ -47,7 +47,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const [hasFocus, setHasFocus] = useState(false);
   const [input, setInput] = useState('');
   const { direction } = LOCALE_FEATURES[locale];
-  const { tileFontSize } = getTileSizes(tileSize);
   const showInputPrompt = inputMode === 'touchscreen' && hasFocus;
   const ref = useRef<HTMLDivElement>(null);
 
@@ -58,7 +57,7 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
 
   useOnclickOutside(() => setHasFocus(false), {
     ignoreClass: [InputPrompt.styles.form, InputPrompt.styles.input],
-    refs: ref.current ? [ref as RefObject<HTMLDivElement>] : [],
+    refs: [ref as RefObject<HTMLDivElement>],
   });
 
   const changeActiveIndex = useCallback(
@@ -158,7 +157,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         })}
         data-testid="rack"
         ref={ref}
-        style={{ fontSize: tileFontSize }}
         onPaste={handlePaste}
       >
         {tiles.map(({ character, tile }, index) => (
@@ -172,7 +170,6 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
             index={index}
             inputRef={tilesRefs[index]}
             key={index}
-            size={tileSize}
             tile={tile}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
@@ -187,7 +184,7 @@ export const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
             ref={floatingInputPrompt.refs.setFloating}
             style={{
               position: floatingInputPrompt.strategy,
-              top: floatingInputPrompt.y ? floatingInputPrompt.y - rackHeight : 0,
+              top: floatingInputPrompt.y ? `calc(${floatingInputPrompt.y}px - var(--rack-tile-size))` : 0,
               left: floatingInputPrompt.x ?? 0,
             }}
             value={input}

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.module.scss

@@ -3,6 +3,8 @@
 .form {
   @include focus-effect;
 
+  width: calc(var(--rack-size) * var(--rack-tile-size));
+  height: var(--rack-tile-size);
   border-radius: var(--border--radius);
 }
 

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly form: string;
+  readonly input: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -10,7 +10,6 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from '@/app-layout';
 import { rackSlice, selectConfig, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './InputPrompt.module.scss';
@@ -29,7 +28,6 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
   ({ className, style, value, onBlur, onChange, onSubmit, ...props }, ref) => {
     const dispatch = useDispatch();
     const translate = useTranslate();
-    const { rackHeight, rackWidth } = useAppLayout();
     const config = useTypedSelector(selectConfig);
     const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
 
@@ -52,17 +50,7 @@ const InputPromptBase = forwardRef<HTMLFormElement, Props>(
     }, [inputRef]);
 
     return (
-      <form
-        className={classNames(styles.form, className)}
-        ref={ref}
-        style={{
-          width: rackWidth,
-          height: rackHeight,
-          ...style,
-        }}
-        onSubmit={handleSubmit}
-        {...props}
-      >
+      <form className={classNames(styles.form, className)} ref={ref} style={style} onSubmit={handleSubmit} {...props}>
         <input
           autoCapitalize="none"
           autoComplete="off"

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/lib.ts

@@ -1,6 +1,6 @@
 import { type Config } from '@scrabble-solver/types';
 
-import { extractCharacters } from '@/lib';
+import { extractCharacters } from '@/lib/extractCharacters';
 
 export const extractRack = (config: Config, value: string): (string | null)[] => {
   const charactersByCase = extractCharacters(config, value, {

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.module.scss.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly rackTile: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.tsx

@@ -15,7 +15,10 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from '@/lib';
+import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
+import { extractCharacters } from '@/lib/extractCharacters';
+import { extractInputValue } from '@/lib/extractInputValue';
+import { isCtrl } from '@/lib/isCtrl';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -38,7 +41,6 @@ interface Props {
   className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement | null>;
-  size: number;
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -51,7 +53,6 @@ export const RackTile: FunctionComponent<Props> = ({
   className,
   index,
   inputRef,
-  size,
   tile,
   onChange,
   onKeyDown,
@@ -149,10 +150,10 @@ export const RackTile: FunctionComponent<Props> = ({
       isBlank={character === BLANK}
       isValid={isValid}
       key={index}
+      locale={locale}
       placeholder={translate('rack.placeholder')[index]}
       points={points}
       raised
-      size={size}
       tabIndex={index === 0 ? undefined : -1}
       onChange={handleChange}
       onFocus={handleFocus}

package/packages/scrabble-solver/src/components/Rack/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { zipCharactersAndTiles } from '@/lib';
+import { zipCharactersAndTiles } from '@/lib/zipCharactersAndTiles';
 import { selectRack, selectResultCandidateTiles } from '@/state';
 
 export const selectRemainingTilesGroups = createSelector(

package/packages/scrabble-solver/src/components/Radio/Radio.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly checked: string;
+  readonly content: string;
+  readonly disabled: string;
+  readonly icon: string;
+  readonly iconContent: string;
+  readonly input: string;
+  readonly radio: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type ReactNode } from 'react';
+import { type FunctionComponent, type ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 import { type TranslationKey } from '@/types';
@@ -12,28 +12,19 @@ interface Props {
   children?: ReactNode;
   className?: string;
   dataTestId?: string;
-  style?: CSSProperties;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-export const Cell: FunctionComponent<Props> = ({
-  children,
-  className,
-  dataTestId,
-  style,
-  translationKey,
-  tooltip,
-  value,
-}) => {
+export const Cell: FunctionComponent<Props> = ({ children, className, dataTestId, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
 
   return (
     <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
-      <div className={classNames(styles.cell, className)} data-testid={dataTestId} style={style}>
+      <div className={classNames(styles.cell, className)} data-testid={dataTestId}>
         {children || formattedValue}
       </div>
     </Tooltip>

package/packages/scrabble-solver/src/components/Results/Header.tsx

@@ -1,16 +1,19 @@
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { useColumns } from '@/hooks';
-import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from '@/icons';
-import { RESULTS_COLUMN_WIDTH } from '@/parameters';
+import { useColumns } from '@/hooks/useColumns';
+import GeoAlt from '@/icons/GeoAlt.svg';
+import OneTwoThree from '@/icons/OneTwoThree.svg';
+import Square from '@/icons/Square.svg';
+import SquareA from '@/icons/SquareA.svg';
+import SquareB from '@/icons/SquareB.svg';
+import Squares from '@/icons/Squares.svg';
+import Words from '@/icons/Words.svg';
 import { ResultColumnId } from '@/types';
 
 import { HeaderButton } from './HeaderButton';
 import styles from './Results.module.scss';
 
 export const Header: FunctionComponent = () => {
-  const { resultWordWidth } = useAppLayout();
   const columns = useColumns();
 
   return (
@@ -20,18 +23,12 @@ export const Header: FunctionComponent = () => {
           className={styles.coordinates}
           Icon={GeoAlt}
           id={ResultColumnId.Coordinates}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Coordinates] }}
           translationKey="settings.showCoordinates"
         />
       )}
 
       {columns[ResultColumnId.Word] && (
-        <HeaderButton
-          className={styles.word}
-          id={ResultColumnId.Word}
-          style={{ flexBasis: resultWordWidth }}
-          translationKey="common.word"
-        />
+        <HeaderButton className={styles.word} id={ResultColumnId.Word} translationKey="common.word" />
       )}
 
       {columns[ResultColumnId.TilesCount] && (
@@ -39,7 +36,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Squares}
           id={ResultColumnId.TilesCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.TilesCount] }}
           translationKey="common.tiles"
         />
       )}
@@ -49,7 +45,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareA}
           id={ResultColumnId.VowelsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.VowelsCount] }}
           translationKey="common.vowels"
         />
       )}
@@ -59,7 +54,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={SquareB}
           id={ResultColumnId.ConsonantsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.ConsonantsCount] }}
           translationKey="common.consonants"
         />
       )}
@@ -69,7 +63,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Square}
           id={ResultColumnId.BlanksCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.BlanksCount] }}
           translationKey="common.blanks"
         />
       )}
@@ -79,7 +72,6 @@ export const Header: FunctionComponent = () => {
           className={styles.stat}
           Icon={Words}
           id={ResultColumnId.WordsCount}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.WordsCount] }}
           translationKey="common.words"
         />
       )}
@@ -89,7 +81,6 @@ export const Header: FunctionComponent = () => {
           className={styles.points}
           Icon={OneTwoThree}
           id={ResultColumnId.Points}
-          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Points] }}
           translationKey="common.points"
         />
       )}

package/packages/scrabble-solver/src/components/Results/HeaderButton.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
+import { type FunctionComponent, type ReactElement, type SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { SortDown, SortUp } from '@/icons';
+import SortDown from '@/icons/SortDown.svg';
+import SortUp from '@/icons/SortUp.svg';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from '@/state';
 import { type ResultColumnId, SortDirection, type TranslationKey } from '@/types';
 
@@ -15,10 +16,9 @@ interface Props {
   Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   id: ResultColumnId;
   translationKey: TranslationKey;
-  style?: CSSProperties;
 }
 
-export const HeaderButton = ({ className, Icon, id, translationKey, style }: Props): ReactElement => {
+export const HeaderButton = ({ className, Icon, id, translationKey }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
@@ -32,7 +32,6 @@ export const HeaderButton = ({ className, Icon, id, translationKey, style }: Pro
       <button
         aria-label={translate(translationKey)}
         className={classNames(styles.headerButton, className)}
-        style={style}
         type="button"
         onClick={handleClick}
       >

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -3,10 +3,9 @@ import { type FocusEventHandler, type MouseEventHandler, type ReactElement, useR
 import Highlighter from 'react-highlight-words';
 import { type RowComponentProps } from 'react-window';
 
-import { useAppLayout } from '@/app-layout';
-import { useColumns } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import { noop } from '@/lib';
+import { useColumns } from '@/hooks/useColumns';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { noop } from '@/lib/noop';
 import {
   selectIsResultMatching,
   selectLocale,
@@ -30,7 +29,6 @@ export const Result = ({
   onMouseEnter = noop,
   style,
 }: RowComponentProps<ResultData>): ReactElement => {
-  const { resultWordWidth } = useAppLayout();
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
@@ -53,7 +51,6 @@ export const Result = ({
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
-        [styles.notMatching]: !isMatching,
       })}
       data-testid="result"
       ref={ref}
@@ -70,12 +67,7 @@ export const Result = ({
         )}
 
         {columns[ResultColumnId.Word] && (
-          <Cell
-            className={styles.word}
-            style={{ flexBasis: resultWordWidth }}
-            translationKey="common.word"
-            value={result.word}
-          >
+          <Cell className={styles.word} translationKey="common.word" value={result.word}>
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
           </Cell>
         )}

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -145,14 +145,11 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     justify-content: flex-start;
     padding-inline-start: $row-padding-horizontal;
   }
-
-  &:last-child {
-    flex: 1;
-  }
 }
 
 .word {
-  flex: 0 0;
+  flex: 1 1 0;
+  min-width: 0;
   text-transform: uppercase;
 }
 
@@ -167,7 +164,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .points {
   $width: 80px;
 
-  flex: 1 0 $width;
+  flex: 0 0 $width;
+  max-width: $width;
   font-weight: bold;
 }
 

package/packages/scrabble-solver/src/components/Results/Results.module.scss.d.ts

@@ -0,0 +1,27 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly cell: string;
+  readonly content: string;
+  readonly coordinates: string;
+  readonly emptyState: string;
+  readonly header: string;
+  readonly headerButton: string;
+  readonly headerButtonIcon: string;
+  readonly headerButtonLabel: string;
+  readonly highlight: string;
+  readonly highlighted: string;
+  readonly input: string;
+  readonly list: string;
+  readonly listContainer: string;
+  readonly outdated: string;
+  readonly points: string;
+  readonly result: string;
+  readonly resultContent: string;
+  readonly results: string;
+  readonly solveButton: string;
+  readonly sortIcon: string;
+  readonly stat: string;
+  readonly word: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/Results/Results.tsx

@@ -3,9 +3,9 @@ import { useEffect, useMemo, type FunctionComponent } from 'react';
 import { List, useListRef } from 'react-window';
 import { useDebounce } from 'use-debounce';
 
-import { useLatest } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import { RESULTS_ITEM_HEIGHT } from '@/parameters';
+import { useLatest } from '@/hooks/useLatest';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
 import {
   selectAreResultsOutdated,
   selectLocale,
@@ -126,6 +126,7 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
                   })}
                   dir={direction}
                   listRef={listRef}
+                  overscanCount={RESULTS_OVERSCAN_COUNT}
                   rowComponent={Result}
                   rowCount={results.length}
                   rowHeight={RESULTS_ITEM_HEIGHT}

package/packages/scrabble-solver/src/components/Results/SolveButton.tsx

@@ -1,7 +1,7 @@
 import { type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Search } from '@/icons';
+import Search from '@/icons/Search.svg';
 import {
   selectAreResultsOutdated,
   selectSolveIsLoading,

package/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly input: string;
+  readonly resultsInput: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { isRegExp } from '@/lib';
+import { isRegExp } from '@/lib/isRegExp';
 import { resultsSlice, selectResultsQuery, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './ResultsInput.module.scss';

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss

@@ -1,17 +1,13 @@
 @use 'styles/mixins' as *;
 
 .solver {
-  --spacing: var(--spacing--xl);
+  --spacing: var(--components-spacing);
 
   position: relative;
   margin: 0 var(--spacing);
   display: flex;
   flex-direction: column;
 
-  @include media('<xl') {
-    --spacing: var(--spacing--l);
-  }
-
   @include media('<l', 'touch') {
     margin-bottom: calc(3 * var(--spacing--l) + var(--button--icon--size));
   }
@@ -108,6 +104,11 @@
 
 .controls {
   width: 100%;
+  max-width: var(--controls-max-width);
+
+  @include media('>=l') {
+    display: none;
+  }
 }
 
 .emptyState {

package/packages/scrabble-solver/src/components/Solver/Solver.module.scss.d.ts

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly board: string;
+  readonly boardContainer: string;
+  readonly bottomContainer: string;
+  readonly bottomContent: string;
+  readonly column: string;
+  readonly container: string;
+  readonly content: string;
+  readonly controls: string;
+  readonly dictionary: string;
+  readonly dictionaryContainer: string;
+  readonly dictionaryInput: string;
+  readonly emptyState: string;
+  readonly results: string;
+  readonly solver: string;
+  readonly submitInput: string;
+};
+
+export default styles;