Merge pull request #2847 from Brain-up/fix/mobile-responsiveness

lifeart · web-flow · commit 7871aebd5cad · 2026-03-10T11:22:17.000+03:00
Fix mobile responsiveness across all pages
diff --git a/frontend/app/components/audiometry/test-player/index.gts b/frontend/app/components/audiometry/test-player/index.gts
@@ -724,7 +724,7 @@ export default class AudiometryTestPlayerComponent extends Component<AudiometryT
                 {{t "audiometry.replay"}}
               </button>
 
-              <div class="grid grid-cols-3 gap-3 max-w-md mx-auto">
+              <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 max-w-md mx-auto">
                 {{#each this.speechDisplayWords as |option|}}
                   <button
                     data-test-speech-word
diff --git a/frontend/app/components/exercise-type/index.css b/frontend/app/components/exercise-type/index.css
@@ -11,7 +11,8 @@
     flex-direction: column;
     overflow: hidden;
     position: relative;
-    width: 410px;
+    max-width: 410px;
+    width: 100%;
   }
 
   .card-img {
@@ -29,7 +30,8 @@
 
 @media (max-width: 640px) {
   .c-exercise-type .card {
-    width: 220px;
+    max-width: 220px;
+    width: 100%;
   }
 }
 
diff --git a/frontend/app/components/footer/index.gts b/frontend/app/components/footer/index.gts
@@ -24,7 +24,7 @@ import { t } from 'ember-intl';
           </span>
         </div>
         <div>
-          <ul class="c-footer__sponsors min-width-10 flex items-center">
+          <ul class="c-footer__sponsors min-w-10 flex flex-wrap items-center">
             <li data-test-support-logo>
               <a href="https://www.jetbrains.com/" target="blank" rel="noopener">
                 <img src="/logos/jetbrains-variant-4_.png" alt="JetBrains" />
diff --git a/frontend/app/components/header/index.css b/frontend/app/components/header/index.css
@@ -95,7 +95,20 @@
     display: block;
     min-width: 100px;
     padding: 6px 20px;
-    white-space: nowrap;
+  }
+
+  .dropdown a[target="_blank"] {
+    position: relative;
+    padding-right: 30px;
+  }
+
+  .dropdown a[target="_blank"] .external-icon {
+    position: absolute;
+    top: 4px;
+    right: 8px;
+    width: 12px;
+    height: 12px;
+    opacity: 0.6;
   }
 
   .dropdown a:hover {
diff --git a/frontend/app/components/header/index.gts b/frontend/app/components/header/index.gts
@@ -19,6 +19,14 @@ import XpBadge from 'brn/components/xp-badge';
 import StreakCounter from 'brn/components/streak-counter';
 import GamificationService from 'brn/services/gamification';
 
+const ExternalLinkIcon = <template>
+  <svg class="external-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    <polyline points="15 3 21 3 21 9" />
+    <line x1="10" y1="14" x2="21" y2="3" />
+  </svg>
+</template>;
+
 export default class HeaderComponent extends Component {
   @service('session') session!: Session;
   @service('user-data') userData!: UserDataService;
@@ -118,13 +126,13 @@ export default class HeaderComponent extends Component {
               <span class="md:inline-flex md:px-2 items-center shrink-0 hidden font-semibold tracking-wider text-white uppercase">
                 <button
                   type="button"
-                  class="btn-press hover:text-white/50 py-2 text-white bg-transparent rounded uppercase {{if (eq this.activeLocale 'ru-ru') 'font-bold'}}"
+                  class="btn-press hover:text-white/50 min-h-[44px] min-w-[44px] py-2 text-white bg-transparent rounded uppercase {{if (eq this.activeLocale 'ru-ru') 'font-bold'}}"
                   {{on "click" (fn this.setLocale "ru")}}
                 >RU</button>
                 <span class="mx-1">/</span>
                 <button
                   type="button"
-                  class="btn-press hover:text-white/50 py-2 text-white bg-transparent rounded uppercase {{if (eq this.activeLocale 'en-us') 'font-bold'}}"
+                  class="btn-press hover:text-white/50 min-h-[44px] min-w-[44px] py-2 text-white bg-transparent rounded uppercase {{if (eq this.activeLocale 'en-us') 'font-bold'}}"
                   {{on "click" (fn this.setLocale "en")}}
                 >EN</button>
               </span>
@@ -151,9 +159,9 @@ export default class HeaderComponent extends Component {
                     >EN</button>
                   </div>
                   <LinkTo class="lg:hidden" @route="description" {{on "click" this.closeMenu}}>{{t "header.about"}}</LinkTo>
-                  <a class="xl:hidden" target="_blank" href="https://t.me/BrainUpUsers" rel="noopener noreferrer" {{on "click" this.closeMenu}}>Telegram</a>
-                  <a target="_blank" href="https://opencollective.com/brainup" rel="noopener noreferrer">{{t "header.donate"}}</a>
-                  <a target="_blank" href="https://github.com/Brain-up/brn" rel="noopener noreferrer">{{t "header.github"}}</a>
+                  <a class="xl:hidden" target="_blank" href="https://t.me/BrainUpUsers" rel="noopener noreferrer" {{on "click" this.closeMenu}}>Telegram<ExternalLinkIcon /></a>
+                  <a target="_blank" href="https://opencollective.com/brainup" rel="noopener noreferrer">{{t "header.donate"}}<ExternalLinkIcon /></a>
+                  <a target="_blank" href="https://github.com/Brain-up/brn" rel="noopener noreferrer">{{t "header.github"}}<ExternalLinkIcon /></a>
                   <LinkTo @route="contact" {{on "click" this.closeMenu}}>{{t "header.contact"}}</LinkTo>
                   <LinkTo @route="specialists" {{on "click" this.closeMenu}}>{{t "header.specialists"}}</LinkTo>
                   <LinkTo @route="contributors" {{on "click" this.closeMenu}}>{{t "header.contributors"}}</LinkTo>
@@ -251,8 +259,8 @@ export default class HeaderComponent extends Component {
                 >{{t "header.more"}}</button>
                 <input type="checkbox" />
                 <div class="sm:text-base bottom absolute z-20 py-2 text-xs rounded">
-                  <a target="_blank" href="https://opencollective.com/brainup" rel="noopener noreferrer">{{t "header.donate"}}</a>
-                  <a target="_blank" href="https://github.com/Brain-up/brn" rel="noopener noreferrer">{{t "header.github"}}</a>
+                  <a target="_blank" href="https://opencollective.com/brainup" rel="noopener noreferrer">{{t "header.donate"}}<ExternalLinkIcon /></a>
+                  <a target="_blank" href="https://github.com/Brain-up/brn" rel="noopener noreferrer">{{t "header.github"}}<ExternalLinkIcon /></a>
                   <LinkTo @route="contact" {{on "click" this.closeMenu}}>{{t "header.contact"}}</LinkTo>
                   <LinkTo @route="specialists" {{on "click" this.closeMenu}}>{{t "header.specialists"}}</LinkTo>
                   <LinkTo @route="contributors" {{on "click" this.closeMenu}}>{{t "header.contributors"}}</LinkTo>
diff --git a/frontend/app/components/image-display-block/index.css b/frontend/app/components/image-display-block/index.css
@@ -2,7 +2,7 @@
 
 .image-block {
   animation: fade-out 0.5s;
-  min-width: 350px;
+  min-width: min(350px, 100%);
   min-height: 350px;
   max-width: 100%;
   max-height: 100%;
diff --git a/frontend/app/components/profile/index.gts b/frontend/app/components/profile/index.gts
@@ -277,7 +277,7 @@ export default class ProfileComponent extends Component {
           title="{{this.user.email}}"
           style={{htmlSafe
             (concat "background-image: url('" this.avatarUrl "');")
-          }} class="btn-press gradient-background focus:outline-hidden inline-flex items-center justify-center w-32 h-32 m-auto bg-center bg-contain border border-gray-400 rounded-full" {{on "click" this.onShowAvatars}}
+          }} class="btn-press gradient-background focus:outline-hidden inline-flex items-center justify-center w-24 h-24 sm:w-32 sm:h-32 m-auto bg-center bg-contain border border-gray-400 rounded-full" {{on "click" this.onShowAvatars}}
         >
         </button>
       </div>
diff --git a/frontend/app/components/robot/index.css b/frontend/app/components/robot/index.css
@@ -4,6 +4,7 @@
     position: relative;
     margin: 6em auto 0 auto;
     padding: 10px;
+    width: 320px;
     -webkit-transform-origin: bottom;
     transform-origin: bottom;
     -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px);
diff --git a/frontend/app/components/robot/index.gts b/frontend/app/components/robot/index.gts
@@ -10,8 +10,7 @@ import { LinkTo } from '@ember/routing';
       xmlns:xlink="http://www.w3.org/1999/xlink"
       x="0"
       y="0"
-      width="320px"
-      height="300px"
+      style="max-width:100%;height:auto"
       viewBox="0 0 160 300"
       enable-background="new 0 0 320 300"
       xml:space="preserve"
diff --git a/frontend/app/components/statistics/week-time-track/index.gts b/frontend/app/components/statistics/week-time-track/index.gts
@@ -94,7 +94,6 @@ export default class WeekTimeTrackComponent extends Component<WeekTimeTrackSigna
       },
       size: {
         height: 200,
-        width: 1000,
       },
       legend: {
         show: false,
diff --git a/frontend/app/components/task-player/auditory-sequence/index.css b/frontend/app/components/task-player/auditory-sequence/index.css
@@ -4,10 +4,16 @@
   list-style: none;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 8px;
 }
 
+@media (min-width: 480px) {
+  .auditory-sequence__options {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 @media (min-width: 640px) {
   .auditory-sequence__options {
     grid-template-columns: repeat(5, 1fr);
diff --git a/frontend/app/components/task-player/index.css b/frontend/app/components/task-player/index.css
@@ -29,6 +29,13 @@
   flex-basis: 20%;
 }
 
+@media (max-width: 640px) {
+  .task-player__option[data-cols="4"],
+  .task-player__option[data-cols="5"] {
+    flex-basis: 50%;
+  }
+}
+
 .task-player__option-button {
   width: 100%;
   display: block;
diff --git a/frontend/app/components/task-player/phoneme-pairs/index.css b/frontend/app/components/task-player/phoneme-pairs/index.css
@@ -5,12 +5,18 @@
   padding: 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
+  gap: 8px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
 }
 
+@media (min-width: 640px) {
+  .phoneme-pairs__options {
+    gap: 16px;
+  }
+}
+
 .phoneme-pairs__option {
   display: flex;
 }
diff --git a/frontend/app/components/text-image-button/index.css b/frontend/app/components/text-image-button/index.css
@@ -93,7 +93,7 @@
 @media (max-width: 640px) and (orientation: landscape) {
   .c-text-image-button {
     button {
-      min-height: 40px;
+      min-height: 44px;
     }
   }
 }
diff --git a/frontend/app/components/ui/confirm-dialog/index.gts b/frontend/app/components/ui/confirm-dialog/index.gts
@@ -72,7 +72,7 @@ export default class UiConfirmDialogComponent extends Component<UiConfirmDialogS
   <template>
     <dialog
       data-test-confirm-dialog
-      class="p-0 rounded-lg shadow-xl backdrop:bg-black/50 max-w-sm w-full"
+      class="p-0 rounded-lg shadow-xl backdrop:bg-black/50 max-w-[calc(100vw-2rem)] sm:max-w-sm w-full"
       ...attributes
       {{didInsert this.onInsert}}
     >
diff --git a/frontend/app/components/ui/exercise-button/index.css b/frontend/app/components/ui/exercise-button/index.css
@@ -8,7 +8,7 @@
   background-clip: content-box, border-box;
   padding: 0;
   width: 100%;
-  max-width: 168px;
+  max-width: min(168px, 100%);
   aspect-ratio: 1;
   position: relative;
 
diff --git a/frontend/app/styles/app.css b/frontend/app/styles/app.css
@@ -239,6 +239,12 @@ a[disabled] {
   padding: 25px 40px 40px;
 }
 
+@media (max-width: 1024px) {
+  .modal-body {
+    width: 95vw;
+  }
+}
+
 @media (max-width: 640px) {
   .custom-modal-overlay {
     min-height: 0;
diff --git a/frontend/app/templates/contributors.gts b/frontend/app/templates/contributors.gts
@@ -33,7 +33,7 @@ const tpl: TOC<Signature> = <template>
             (concat "contributors.kinds." kindType)
           }}</h3>
         <div
-          class="md:flex max-w-screen-xl m-auto flex-wrap
+          class="md:flex max-w-screen-xl m-auto flex-wrap gap-4
            "
         >
           {{#each group as |i|}}
diff --git a/frontend/app/templates/description/developers.gts b/frontend/app/templates/description/developers.gts
@@ -137,9 +137,9 @@ const tpl: TOC<Signature> = <template>
           {{t "description.team.thanks_words"}}
         </p>
 
-        <ul class="sm:p-10 flex flex-wrap justify-between p-4 -mx-4 bg-gray-100">
+        <ul class="sm:p-10 flex flex-wrap justify-between p-4 -mx-4 bg-gray-100 overflow-hidden">
           {{#each @controller.persons.teamMembers as |teamMember i|}}
-            <li class="w-24 h-24 m-2 my-4 overflow-hidden rounded-full">
+            <li class="w-16 sm:w-24 h-16 sm:h-24 m-2 my-4 overflow-hidden rounded-full">
               <img
                 src={{teamMember.img}}
                 alt={{t "description.team.image_alt" i=i}}
diff --git a/frontend/app/templates/description/index.gts b/frontend/app/templates/description/index.gts
@@ -147,7 +147,7 @@ export default RouteTemplate(
         {{t "description.support.header"}}
       </h2>
 
-      <ul class="flex flex-wrap justify-around p-6 -mx-4 bg-gray-100">
+      <ul class="flex flex-wrap justify-around p-6 -mx-4 bg-gray-100 overflow-hidden">
         <li class="flex items-center p-3">
           <a
             class="block"
@@ -156,7 +156,7 @@ export default RouteTemplate(
             rel="noopener noreferrer"
           >
             <img
-              class="w-32"
+              class="w-20 sm:w-32"
               src="/content/pages/description/epam-logo.png"
               alt="EPAM"
             />
@@ -171,7 +171,7 @@ export default RouteTemplate(
             rel="noopener noreferrer"
           >
             <img
-              class="w-40"
+              class="w-24 sm:w-40"
               src="/content/pages/description/selectel-logo.svg"
               alt="Selectel"
             />
@@ -201,7 +201,7 @@ export default RouteTemplate(
             rel="noopener noreferrer"
           >
             <img
-              class="w-40"
+              class="w-24 sm:w-40"
               src="/content/pages/description/yandex-cloud-logo.svg"
               alt="YandexCloud"
             />
diff --git a/frontend/app/templates/error.gts b/frontend/app/templates/error.gts
@@ -9,7 +9,7 @@ interface Signature {
 
 const tpl: TOC<Signature> = <template>
     oooops...
-    <pre>
+    <pre class="overflow-x-auto whitespace-pre-wrap break-words">
       {{@model}}
     </pre>
   </template>;
diff --git a/frontend/app/templates/index.gts b/frontend/app/templates/index.gts
@@ -11,13 +11,13 @@ import AboutUs from 'brn/components/about-us';
 export default RouteTemplate(
   <template>
     <section
-      class="header lg:h-screen sm:pt-16 container relative flex flex-wrap items-center mx-auto" style="max-height:860px"
+      class="header lg:h-screen sm:pt-16 container relative flex flex-wrap items-center mx-auto max-h-[70vh] sm:max-h-[860px]"
     >
       <div
         class="md:w-8/12 lg:w-6/12 xl:w-6/12 container flex flex-wrap items-center w-full px-4 mx-auto"
       >
         <div>
-          <h2 class="text-4xl font-semibold text-gray-700">
+          <h2 class="text-2xl sm:text-4xl font-semibold text-gray-700">
             {{t "index.app_info"}}
           </h2>
           <p class="mt-4 text-lg leading-relaxed text-gray-600">
diff --git a/frontend/app/templates/specialists.gts b/frontend/app/templates/specialists.gts
@@ -33,7 +33,7 @@ const tpl: TOC<Signature> = <template>
           <div
             class="lg:mb-0 lg:flex-1 md:flex lg:mr-12 sm:p-8 lg:p-12 sm:mt-6 sm:mb-12 p-4 mt-4 mb-4 border-4 border-gray-200 rounded-lg"
           >
-            <div class="flex-initial w-24 mr-4">
+            <div class="flex-initial w-16 sm:w-24 mr-4">
               <img
                 src={{or i.avatar "/pictures/avatars/avatar 1.png"}}
                 alt="user avatar"

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,8 @@`
`11`	`11`	`flex-direction: column;`
`12`	`12`	`overflow: hidden;`
`13`	`13`	`position: relative;`
`14`		`- width: 410px;`
	`14`	`+ max-width: 410px;`
	`15`	`+ width: 100%;`
`15`	`16`	`}`
`16`	`17`
`17`	`18`	`.card-img {`
`@@ -29,7 +30,8 @@`
`29`	`30`
`30`	`31`	`@media (max-width: 640px) {`
`31`	`32`	`.c-exercise-type .card {`
`32`		`- width: 220px;`
	`33`	`+ max-width: 220px;`
	`34`	`+ width: 100%;`
`33`	`35`	`}`
`34`	`36`	`}`
`35`	`37`
Original file line number	Diff line number	Diff line change
`@@ -277,7 +277,7 @@ export default class ProfileComponent extends Component {`
`277`	`277`	`title="{{this.user.email}}"`
`278`	`278`	`style={{htmlSafe`
`279`	`279`	`(concat "background-image: url('" this.avatarUrl "');")`
`280`		`- }} class="btn-press gradient-background focus:outline-hidden inline-flex items-center justify-center w-32 h-32 m-auto bg-center bg-contain border border-gray-400 rounded-full" {{on "click" this.onShowAvatars}}`
	`280`	`+ }} class="btn-press gradient-background focus:outline-hidden inline-flex items-center justify-center w-24 h-24 sm:w-32 sm:h-32 m-auto bg-center bg-contain border border-gray-400 rounded-full" {{on "click" this.onShowAvatars}}`
`281`	`281`	`>`
`282`	`282`	`</button>`
`283`	`283`	`</div>`