[GH-ISSUE #36] If the QR code and config do not fit into the window #22

New issue

Open

opened 2026-10-13 21:05:09 +00:00 by bsakaguchi · 0 comments

bsakaguchi commented

2026-10-13 21:05:09 +00:00

Owner

Originally created by @ewgen198409 on GitHub (Mar 15, 2026).
Original GitHub issue: https://github.com/amnezia-vpn/amneziawg-openwrt/issues/36

QR code display issue in peer configuration export

Problem

The QR code in the peer configuration export dialog has a fixed width of 320px with a rigid flex layout, which causes two issues:

On some screen sizes the QR code is partially cut off
The config text field is placed next to the QR code and overlaps it

Fix

Three simple changes in /www/luci-static/resources/protocol/amneziawg.js:

1. Change layout direction from row to column so QR code appears above the config text:

display:flex;flex-wrap:wrap;align-items:center;gap:.5em;width:100%
→
display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%

2. Remove fixed QR code width, let it size automatically:

'width:320px;flex:0 1 320px;text-align:center'
→
'width:auto;text-align:center'

3. Make config text field full width:

'flex:1;white-space:pre;overflow:auto'
→
'width:100%;white-space:pre;overflow:auto'

Or apply with sed:

sed -i "s/display:flex;flex-wrap:wrap;align-items:center;gap:.5em;width:100%/display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%/g" /www/luci-static/resources/protocol/amneziawg.js
 
sed -i "s/'width:320px;flex:0 1 320px;text-align:center'/'width:auto;text-align:center'/g" /www/luci-static/resources/protocol/amneziawg.js
 
sed -i "s/'flex:1;white-space:pre;overflow:auto'/'width:100%;white-space:pre;overflow:auto'/g" /www/luci-static/resources/protocol/amneziawg.js

Result

QR code is displayed in full size above the config text, both are fully visible and readable.

Originally created by @ewgen198409 on GitHub (Mar 15, 2026). Original GitHub issue: https://github.com/amnezia-vpn/amneziawg-openwrt/issues/36 # QR code display issue in peer configuration export ## Problem The QR code in the peer configuration export dialog has a fixed width of `320px` with a rigid flex layout, which causes two issues: - On some screen sizes the QR code is partially cut off - The config text field is placed next to the QR code and overlaps it ## Fix Three simple changes in `/www/luci-static/resources/protocol/amneziawg.js`: **1. Change layout direction from row to column so QR code appears above the config text:** ``` display:flex;flex-wrap:wrap;align-items:center;gap:.5em;width:100% → display:flex;flex-direction:column;align-items:center;gap:.5em;width:100% ``` **2. Remove fixed QR code width, let it size automatically:** ``` 'width:320px;flex:0 1 320px;text-align:center' → 'width:auto;text-align:center' ``` **3. Make config text field full width:** ``` 'flex:1;white-space:pre;overflow:auto' → 'width:100%;white-space:pre;overflow:auto' ``` Or apply with sed: ```bash sed -i "s/display:flex;flex-wrap:wrap;align-items:center;gap:.5em;width:100%/display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%/g" /www/luci-static/resources/protocol/amneziawg.js sed -i "s/'width:320px;flex:0 1 320px;text-align:center'/'width:auto;text-align:center'/g" /www/luci-static/resources/protocol/amneziawg.js sed -i "s/'flex:1;white-space:pre;overflow:auto'/'width:100%;white-space:pre;overflow:auto'/g" /www/luci-static/resources/protocol/amneziawg.js ``` ## Result QR code is displayed in full size above the config text, both are fully visible and readable. <img width="843" height="501" alt="Image" src="https://github.com/user-attachments/assets/f14e3fff-ff0b-47cf-bf47-35ba0cd4331b" />

bsakaguchi referenced this issue

2026-10-13 21:05:17 +00:00

[PR #22] [CLOSED] Update Makefile #31