Responsywność przez style

src/app/app.component.css

@@ -1,40 +1,62 @@
 .mat-toolbar {
   display: flex;
+  flex-wrap: wrap; /* Pozwala zawijać elementy na mniejszych ekranach */
   align-items: center;
-  justify-content: space-between; /* Równe rozmieszczenie elementów */
-  padding: 0 16px; /* Marginesy wewnętrzne */
+  justify-content: space-between; /* Rozdzielenie elementów */
+  padding: 0 16px;
 }
 
 .col-left {
   display: flex;
   align-items: center;
-  justify-content: flex-start; /* Wyrównanie flagi do lewej */
+  justify-content: flex-start;
 }
 
 .flag {
-  height: 25px; /* Powiększenie flagi */
+  height: 25px;
   width: auto;
-  margin-right: 16px; /* Odstęp od sąsiednich elementów */
-  border: none; /* Brak ramki */
+  margin-right: 16px;
+  border: none;
 }
 
 .toolbar-item {
-  font-size: 22px; /* Większy rozmiar tekstu */
+  font-size: 22px;
   font-weight: 500;
-  text-transform: none; /* Bez uppercase */
-  color: white; /* Kolor tekstu */
+  text-transform: none;
+  color: white;
+  padding: 8px;
 }
 
 button.mat-icon-button {
-  padding: 0; /* Brak dodatkowych marginesów */
+  padding: 0;
 }
 
 .mat-toolbar-row {
   display: flex;
+  flex-wrap: wrap; /* Pozwala zawijać elementy */
+  justify-content: space-between;
   width: 100%;
 }
 
 .col {
-  text-align: center; /* Wyśrodkowanie tekstu w kolumnach */
-  flex: 1; /* Równe rozciąganie kolumn */
+  text-align: center;
+  flex: 1; /* Równe rozciąganie na większych ekranach */
+}
+
+@media (max-width: 768px) {
+  .mat-toolbar {
+    flex-direction: column; /* Elementy ułożą się pionowo na małych ekranach */
+    padding: 8px; /* Zmniejszenie paddingu */
+  }
+
+  .toolbar-item {
+    font-size: 18px; /* Zmniejszenie rozmiaru tekstu */
+    text-align: center;
+    width: 100%; /* Każdy przycisk zajmie pełną szerokość */
+    margin: 4px 0; /* Odstępy między przyciskami */
+  }
+
+  .flag {
+    height: 20px; /* Zmniejszenie rozmiaru flagi */
+  }
 }