@scrabble-solver/scrabble-solver 2.18.1 → 2.18.3

package/src/components/Table/Row.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import {
+  type CSSProperties,
+  type FocusEventHandler,
+  type FunctionComponent,
+  type MouseEventHandler,
+  type ReactNode,
+} from 'react';
+
+import styles from './Table.module.scss';
+
+interface Props {
+  'aria-label': string;
+  children: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+  highlighted: boolean;
+  inactive: boolean;
+  style?: CSSProperties;
+  onBlur?: FocusEventHandler;
+  onClick?: MouseEventHandler;
+  onFocus?: FocusEventHandler;
+  onMouseEnter?: MouseEventHandler;
+}
+
+export const Row: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
+  children,
+  className,
+  'data-testid': dataTestId,
+  highlighted,
+  inactive,
+  style,
+  onBlur,
+  onClick,
+  onFocus,
+  onMouseEnter,
+}) => {
+  return (
+    <button
+      aria-current={highlighted ? 'true' : undefined}
+      aria-hidden={inactive ? 'true' : undefined}
+      aria-label={ariaLabel}
+      className={classNames(styles.row, className, {
+        [styles.clickable]: Boolean(onClick),
+        [styles.highlighted]: highlighted,
+      })}
+      data-testid={dataTestId}
+      style={style}
+      type="button"
+      onBlur={onBlur}
+      onClick={onClick}
+      onFocus={onFocus}
+      onMouseEnter={onMouseEnter}
+    >
+      <span className={styles.rowContent}>{children}</span>
+    </button>
+  );
+};

package/src/components/{ResultsInput/ResultsInput.tsx → Table/Search.tsx}

@@ -1,20 +1,18 @@
 import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent, type SubmitEventHandler, useState } from 'react';
-import { useDispatch } from 'react-redux';
 
 import { isRegExp } from '@/lib/isRegExp';
-import { resultsSlice, selectResultsQuery, useTranslate, useTypedSelector } from '@/state';
 
-import styles from './ResultsInput.module.scss';
+import styles from './Table.module.scss';
 
 interface Props {
   className?: string;
+  placeholder: string;
+  value: string;
+  onChange: (value: string) => void;
 }
 
-export const ResultsInput: FunctionComponent<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const value = useTypedSelector(selectResultsQuery);
+export const Search: FunctionComponent<Props> = ({ className, placeholder, value, onChange }) => {
   const [localValue, setLocalValue] = useState(value);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -23,7 +21,7 @@ export const ResultsInput: FunctionComponent<Props> = ({ className }) => {
     setLocalValue(newValue);
 
     if (isRegExp(newValue)) {
-      dispatch(resultsSlice.actions.changeQuery(newValue));
+      onChange(newValue);
     }
   };
 
@@ -32,10 +30,10 @@ export const ResultsInput: FunctionComponent<Props> = ({ className }) => {
   };
 
   return (
-    <form className={classNames(styles.resultsInput, className)} onSubmit={handleSubmit}>
+    <form className={classNames(styles.search, className)} onSubmit={handleSubmit}>
       <input
-        className={styles.input}
-        placeholder={translate('results.input.placeholder')}
+        className={styles.searchField}
+        placeholder={placeholder}
         type="text"
         value={localValue}
         onChange={handleChange}

package/src/components/Table/Table.module.scss

@@ -0,0 +1,147 @@
+@use 'styles/mixins' as *;
+
+$row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
+
+.header {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.headerButton {
+  @include button-reset;
+  @include focus-effect;
+
+  cursor: pointer;
+
+  text-transform: uppercase;
+  transition:
+    background-color var(--transition--duration) var(--transition--easing),
+    color var(--transition--duration) var(--transition--easing);
+  background-color: var(--color--background);
+  height: 100%;
+
+  &:first-child {
+    border-start-start-radius: inherit;
+  }
+
+  &:last-child {
+    border-start-end-radius: inherit;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: var(--color--primary);
+    color: var(--color--primary--opposite);
+  }
+
+  &.primary {
+    flex: 1 1 0;
+    min-width: 0;
+    text-transform: uppercase;
+  }
+}
+
+.headerButtonLabel {
+  @include ellipsis;
+
+  flex: 0 1 auto;
+  text-align: start;
+}
+
+.headerButtonIcon {
+  flex: 0 0 auto;
+  width: var(--results--icon--size);
+  height: var(--results--icon--size);
+}
+
+.row {
+  @include button-reset;
+
+  user-select: none;
+  font-weight: 400;
+
+  /**
+   * :focus-visible rather than :focus - a row left focused by click/hover on another row
+   * must not keep looking highlighted.
+   */
+  &:focus-visible,
+  &:hover,
+  &.highlighted {
+    &:not(:disabled) {
+      background-color: var(--color--primary);
+      color: var(--color--primary--opposite);
+    }
+  }
+
+  &[aria-hidden='true'] {
+    color: var(--color--inactive);
+
+    &:focus-visible,
+    &:hover,
+    &.highlighted {
+      &:not(:disabled) {
+        background-color: var(--color--primary--light);
+        color: var(--color--primary--opposite);
+      }
+    }
+  }
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.rowContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--spacing--s);
+  line-height: var(--results--item--height);
+
+  &.primary {
+    flex: 1 1 0;
+    min-width: 0;
+    text-transform: uppercase;
+    justify-content: flex-start;
+    padding-inline-start: $row-padding-horizontal;
+  }
+}
+
+.cellValue {
+  @include ellipsis;
+
+  min-width: 0;
+}
+
+.search {
+  @include focus-effect;
+}
+
+.searchField {
+  @include text-input;
+
+  border: none;
+  border-radius: inherit;
+}
+
+.sortIcon {
+  $size: 19px;
+
+  flex: 0 0 auto;
+  width: $size;
+  height: $size;
+}

package/src/components/Table/Table.module.scss.d.ts

@@ -0,0 +1,19 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly cell: string;
+  readonly cellValue: string;
+  readonly clickable: string;
+  readonly header: string;
+  readonly headerButton: string;
+  readonly headerButtonIcon: string;
+  readonly headerButtonLabel: string;
+  readonly highlighted: string;
+  readonly primary: string;
+  readonly row: string;
+  readonly rowContent: string;
+  readonly search: string;
+  readonly searchField: string;
+  readonly sortIcon: string;
+};
+
+export default styles;

package/src/components/Table/index.ts

@@ -0,0 +1,5 @@
+export { Cell } from './Cell';
+export { Header } from './Header';
+export { HeaderButton } from './HeaderButton';
+export { Row } from './Row';
+export { Search } from './Search';

package/src/components/Tile/Tile.module.scss

@@ -85,9 +85,10 @@
   caret-color: transparent;
   font-size: 16px; // prevent iOS from automatically zooming in on focus
   outline: none;
+  user-select: none;
 
   &::selection {
-    --background--color: transparent;
+    background-color: transparent;
   }
 }
 

package/src/hooks/useColumns.ts

@@ -5,6 +5,7 @@ import { LOCALE_FEATURES } from '@/i18n/constants';
 import { selectLocale, useTypedSelector } from '@/state';
 import { ResultColumnId } from '@/types';
 
+import { useIsCompactLayout } from './useIsCompactLayout';
 import { useMediaQueries } from './useMediaQueries';
 
 const COLUMNS_XS = [ResultColumnId.Coordinates, ResultColumnId.Word, ResultColumnId.Points];
@@ -13,7 +14,7 @@ const COLUMNS_S = [...COLUMNS_XS, ResultColumnId.BlanksCount, ResultColumnId.Wor
 
 const COLUMNS_M = [...COLUMNS_XS];
 
-const COLUMNS_L = [...COLUMNS_XS];
+const COLUMNS_COMPACT = [...COLUMNS_XS];
 
 const selectColumns = createSelector([selectLocale], (locale) => {
   const { consonants, vowels } = LOCALE_FEATURES[locale];
@@ -39,7 +40,8 @@ const selectColumns = createSelector([selectLocale], (locale) => {
 
 export const useColumns = (): Partial<Record<ResultColumnId, boolean>> => {
   const columns = useTypedSelector(selectColumns);
-  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
+  const { isLessThanXs, isLessThanS, isLessThanM } = useMediaQueries();
+  const isCompactLayout = useIsCompactLayout();
 
   const filteredColumns = useMemo(() => {
     if (isLessThanXs) {
@@ -54,12 +56,12 @@ export const useColumns = (): Partial<Record<ResultColumnId, boolean>> => {
       return columns.filter((columnId) => COLUMNS_M.includes(columnId));
     }
 
-    if (isLessThanL) {
-      return columns.filter((columnId) => COLUMNS_L.includes(columnId));
+    if (isCompactLayout) {
+      return columns.filter((columnId) => COLUMNS_COMPACT.includes(columnId));
     }
 
     return columns;
-  }, [columns, isLessThanXs, isLessThanS, isLessThanM, isLessThanL]);
+  }, [columns, isLessThanXs, isLessThanS, isLessThanM, isCompactLayout]);
 
   const columnsMap = useMemo(() => {
     return Object.fromEntries(filteredColumns.map((column) => [column, true]));

package/src/hooks/useIsCompactLayout.ts

@@ -0,0 +1,14 @@
+import { BREAKPOINT_HEIGHT_L } from '@/parameters';
+
+import { useMedia } from './useMedia';
+import { useMediaQuery } from './useMediaQuery';
+
+const SHORT_VIEWPORT = `(max-height: ${BREAKPOINT_HEIGHT_L - 1}px)`;
+
+// Keep in sync with the `compact` media expression in styles/mixins.scss
+export function useIsCompactLayout(): boolean {
+  const isNarrowViewport = useMediaQuery('<l');
+  const isShortViewport = useMedia(SHORT_VIEWPORT);
+
+  return isNarrowViewport || isShortViewport;
+}

package/src/i18n/languages/english.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Search results... (RegExp)",
   "results.insert": "Insert",
   "results.preview": "Preview",
+  "results.select": "Select...",
   "results.solve": "Solve",
   "settings": "Settings",
   "settings.autoGroupTiles": "Group remaining tiles",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternative",
   "settings.showCoordinates.original": "Original",
   "words": "Created words",
+  "words.empty-state.no-words": "No created words - the board is empty.",
+  "words.input.placeholder": "Search words... (RegExp)",
   "words.invalid": "Invalid",
-  "words.valid": "Valid"
+  "words.preview": "Preview",
+  "words.valid": "Valid",
+  "words.validity": "Validity"
 }

package/src/i18n/languages/french.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Rechercher les résultats... (RegExp)",
   "results.insert": "Inserer",
   "results.preview": "Prévisualisation",
+  "results.select": "Sélectionner...",
   "results.solve": "Résoudre",
   "settings": "Options",
   "settings.autoGroupTiles": "Grouper les cases restantes",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternative",
   "settings.showCoordinates.original": "Original",
   "words": "Mots créés",
+  "words.empty-state.no-words": "Pas de mots créés - le plateau est vide.",
+  "words.input.placeholder": "Rechercher les mots... (RegExp)",
   "words.invalid": "Incorrect",
-  "words.valid": "Corriger"
+  "words.preview": "Prévisualisation",
+  "words.valid": "Corriger",
+  "words.validity": "Validité"
 }

package/src/i18n/languages/german.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Suchergebnisse... (RegExp)",
   "results.insert": "Hinzufügen",
   "results.preview": "Vorschau",
+  "results.select": "Auswählen...",
   "results.solve": "Lösen",
   "settings": "Einstellungen",
   "settings.autoGroupTiles": "Restliche Steine gruppieren",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternative",
   "settings.showCoordinates.original": "Original",
   "words": "Gebildete Wörter",
+  "words.empty-state.no-words": "Keine gebildeten Wörter - das Brett ist leer.",
+  "words.input.placeholder": "Wörter suchen... (RegExp)",
   "words.invalid": "Falsch",
-  "words.valid": "Korrekt"
+  "words.preview": "Vorschau",
+  "words.valid": "Korrekt",
+  "words.validity": "Gültigkeit"
 }

package/src/i18n/languages/persian.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "جستجو در نتایج (RegExp)",
   "results.insert": "وارد کردن",
   "results.preview": "پیش نمایش",
+  "results.select": "انتخاب کنید...",
   "results.solve": "حل کن",
   "settings": "تنظیمات",
   "settings.autoGroupTiles": "کاشی های باقی مانده ی طاقچه را کنار هم قرار بده",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "بديل",
   "settings.showCoordinates.original": "إبداعي",
   "words": "کلمات ساخته شده",
+  "words.empty-state.no-words": "کلمه‌ای ساخته نشده - صفحه خالی است.",
+  "words.input.placeholder": "جستجو در کلمات (RegExp)",
   "words.invalid": "نا معتبر",
-  "words.valid": "معتبر"
+  "words.preview": "پیش نمایش",
+  "words.valid": "معتبر",
+  "words.validity": "اعتبار"
 }

package/src/i18n/languages/polish.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Szukaj rozwiązania... (RegExp)",
   "results.insert": "Wstaw",
   "results.preview": "Podgląd",
+  "results.select": "Wybierz...",
   "results.solve": "Rozwiąż",
   "settings": "Opcje",
   "settings.autoGroupTiles": "Grupuj pozostałe płytki",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternatywne",
   "settings.showCoordinates.original": "Oryginalne",
   "words": "Utworzone słowa",
+  "words.empty-state.no-words": "Brak utworzonych słów - plansza jest pusta.",
+  "words.input.placeholder": "Szukaj słów... (RegExp)",
   "words.invalid": "Niepoprawne",
-  "words.valid": "Poprawne"
+  "words.preview": "Podgląd",
+  "words.valid": "Poprawne",
+  "words.validity": "Poprawność"
 }

package/src/i18n/languages/romanian.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Cautare solutii... (RegExp)",
   "results.insert": "Introducere",
   "results.preview": "Previzualizare",
+  "results.select": "Selectati...",
   "results.solve": "Gasire solutii",
   "settings": "Setari",
   "settings.autoGroupTiles": "Litere ramase",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternativă",
   "settings.showCoordinates.original": "Original",
   "words": "Cuvinte create",
+  "words.empty-state.no-words": "Niciun cuvânt creat - tabla este goală.",
+  "words.input.placeholder": "Cautare cuvinte... (RegExp)",
   "words.invalid": "Invalid",
-  "words.valid": "Valid"
+  "words.preview": "Previzualizare",
+  "words.valid": "Valid",
+  "words.validity": "Validitate"
 }

package/src/i18n/languages/spanish.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Busque una solución... (RegExp)",
   "results.insert": "Insertar",
   "results.preview": "Vista previa",
+  "results.select": "Seleccionar...",
   "results.solve": "Resolver",
   "settings": "Configuración",
   "settings.autoGroupTiles": "Agrupar casillas restantes",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternativa",
   "settings.showCoordinates.original": "Original",
   "words": "Palabras creadas",
+  "words.empty-state.no-words": "No hay palabras creadas; el tablero está vacío.",
+  "words.input.placeholder": "Busque una palabra... (RegExp)",
   "words.invalid": "Incorrecto",
-  "words.valid": "Correcto"
+  "words.preview": "Vista previa",
+  "words.valid": "Correcto",
+  "words.validity": "Validez"
 }

package/src/i18n/languages/turkish.json

@@ -59,6 +59,7 @@
   "results.input.placeholder": "Sonuçları Ara... (RegExp)",
   "results.insert": "Sokmak",
   "results.preview": "Önizleme",
+  "results.select": "Seç...",
   "results.solve": "Çöz",
   "settings": "Ayarlar",
   "settings.autoGroupTiles": "Kalan taşları grupla",
@@ -78,6 +79,10 @@
   "settings.showCoordinates.alternative": "Alternatif",
   "settings.showCoordinates.original": "Orijinal",
   "words": "Oluşturulan kelimeler",
+  "words.empty-state.no-words": "Oluşturulan kelime yok - tahta boş.",
+  "words.input.placeholder": "Kelimeleri Ara... (RegExp)",
   "words.invalid": "Geçersiz",
-  "words.valid": "Geçerli"
+  "words.preview": "Önizleme",
+  "words.valid": "Geçerli",
+  "words.validity": "Geçerlilik"
 }

package/src/icons/QuestionSquare.svg

@@ -0,0 +1,5 @@
+<!-- https://icons.getbootstrap.com/icons/question-square/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" fill="currentColor" />
+  <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94" fill="currentColor" />
+</svg>

package/src/lib/createCoordinatesComparator.ts

@@ -0,0 +1,23 @@
+import { type ShowCoordinates } from '@scrabble-solver/types';
+
+import { type Comparator } from '@/types';
+
+import { createStringComparator } from './createStringComparator';
+
+interface Parameters<Item> {
+  getItemCoordinates: (item: Item, showCoordinates: ShowCoordinates) => string;
+  locale: string;
+  showCoordinates: ShowCoordinates;
+}
+
+export function createCoordinatesComparator<Item>({
+  getItemCoordinates,
+  locale,
+  showCoordinates,
+}: Parameters<Item>): Comparator<Item> {
+  const stringComparator = createStringComparator(locale);
+
+  return (a, b) => {
+    return stringComparator(getItemCoordinates(a, showCoordinates), getItemCoordinates(b, showCoordinates));
+  };
+}

package/src/lib/createKeyComparator.ts

@@ -3,10 +3,7 @@ import { type Comparator } from '@/types';
 import { createStringComparator } from './createStringComparator';
 import { numberComparator } from './numberComparator';
 
-export const createKeyComparator = <T extends Record<keyof T, unknown>>(
-  key: keyof T,
-  locale: string,
-): Comparator<T> => {
+export const createKeyComparator = <T extends object>(key: keyof T, locale: string): Comparator<T> => {
   const stringComparator = createStringComparator(locale);
 
   return (a: T, b: T): number => {

package/src/lib/createSortComparator.ts

@@ -0,0 +1,22 @@
+import { type ShowCoordinates } from '@scrabble-solver/types';
+
+import { type Comparator, type ComparatorFactory, type Sort, SortDirection } from '@/types';
+
+import { reverseComparator } from './reverseComparator';
+
+interface Parameters<Item, Id extends string> {
+  comparators: Record<Id, ComparatorFactory<Item>>;
+  locale: string;
+  showCoordinates: ShowCoordinates;
+  sort: Sort<Id>;
+}
+
+export function createSortComparator<Item, Id extends string>({
+  comparators,
+  locale,
+  showCoordinates,
+  sort,
+}: Parameters<Item, Id>): Comparator<Item> {
+  const comparator = comparators[sort.column](locale, showCoordinates);
+  return sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
+}

package/src/lib/getCoordinates.test.ts

@@ -0,0 +1,21 @@
+import { getCoordinates } from './getCoordinates';
+
+describe('getCoordinates', () => {
+  const point = { x: 3, y: 5 };
+
+  it('encodes a horizontal word as row number followed by column letter in original mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: true }, 'original')).toBe('6D');
+  });
+
+  it('encodes a vertical word as column letter followed by row number in original mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: false }, 'original')).toBe('D6');
+  });
+
+  it('encodes a horizontal word as row letter followed by column number in alternative mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: true }, 'alternative')).toBe('F4');
+  });
+
+  it('encodes a vertical word as column number followed by row letter in alternative mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: false }, 'alternative')).toBe('4F');
+  });
+});

package/src/lib/getCoordinates.ts

@@ -0,0 +1,16 @@
+import { type ShowCoordinates } from '@scrabble-solver/types';
+
+import { getCoordinate } from './getCoordinate';
+
+interface Parameters {
+  isHorizontal: boolean;
+  x: number;
+  y: number;
+}
+
+export const getCoordinates = ({ isHorizontal, x, y }: Parameters, showCoordinates: ShowCoordinates): string => {
+  const xCoordinate = getCoordinate(x, showCoordinates === 'original' ? 'letter' : 'number');
+  const yCoordinate = getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter');
+
+  return isHorizontal ? `${yCoordinate}${xCoordinate}` : `${xCoordinate}${yCoordinate}`;
+};

package/src/lib/getNextSort.ts

@@ -0,0 +1,12 @@
+import { type Sort, SortDirection } from '@/types';
+
+export const getNextSort = <Id extends string>(sort: Sort<Id>, column: Id): Sort<Id> => {
+  return {
+    column,
+    direction: sort.column === column ? toggleDirection(sort.direction) : sort.direction,
+  };
+};
+
+const toggleDirection = (direction: SortDirection): SortDirection => {
+  return direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;
+};

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent, memo } from 'react';
 
 import { Badge } from '@/components/Badge';
 import { Modal } from '@/components/Modal';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
@@ -17,6 +18,7 @@ interface Props {
 
 const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const coversViewport = useMediaQuery('<s');
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
   const { direction } = LOCALE_FEATURES[locale];
@@ -44,7 +46,7 @@ const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen,
               {tiles.map((tile) => {
                 return (
                   <div className={styles.character} key={tile.character}>
-                    <Character tile={tile} />
+                    <Character canHighlight={!coversViewport} tile={tile} />
                   </div>
                 );
               })}