Add-on's max width doesn't respect window/card's width

[morning-paradigm]

Long rating history doesn't fit when used in a narrow window or in fullscreen when card's width is limited with CSS: .card { max-width: 675px; }

[jerryzhou196]

@morning-paradigm Thank you for leaving the issue!

That's super weird. The width seems to align with my card template - if possible, could you send me your card's Front, Back and CSS Templates? I think it might have something to do with the styling . (yourcards also just look super nice)

[saxoncameron]

+1

I came here to report this issue as well. Unlike your above example of a full-screen-width window, my Anki window is only 1/3 my screen width (so I can do my reviews with a browser and dictionary open in the other 2/3rds).

Would be cleaner if this wrapped more reliably instead of stretching w/ scroll off-screen :)

    Anki 2.1.35 (84dcaa86) Python 3.8.0 Qt 5.14.2 PyQt 5.14.2
    Platform: Mac 10.15.7
    Flags: frz=True ao=True sv=1
    Add-ons, last update check: 2021-08-02 13:12:37

[jerryzhou196]

Thank you @saxoncameron for the additional details and @morning-paradigm again for bringing this up! Just updated the addon so that it should follow the card's width regardless of if you percentage or px. Just click "Check For Updates" in the anki addon tab to get the newest version and tell me how it goes.

[saxoncameron]

Have finished today's reviews - will verify and report back tomorrow :)

[saxoncameron]

FYI this looks fixed now, I think you can close this issue @jerryzhou196. 👌

[morning-paradigm]

@jerryzhou196 the update has fixed it, but there's still one minor issue. The card canvas seems to be a little bit wider than it should be, resulting in a horizontal scroll, unless I stretch the window slightly wider. It isn't really an issue for since most of the time I use Anki in fullscreen, just thought it might be worth mentioning.

[morning-paradigm]

@jerryzhou196 here are the templates you asked for. These are not really what makes the cards look good. I used the app called Kanji Study that can export to entry and it adds its own styling directly into the 'Meaning' field. I wish I could make Yomichan do something similar. Also I only know some basic CSS, sorry if it's a mess. I've just modified the styling from someone else's deck to my liking. Front:

<div class="big frontcss">{{furigana:EntryFurigana}}</div>

Back:

<div class=big>
    {{furigana:EntryFurigana}}
</div><br>
<div class=left>
    {{furigana:Meaning}}
</div>

{{#Pronunciation}}
<div><br>{{Pronunciation}}</div>
{{/Pronunciation}}

{{#Example}}
<div class=left><br>{{furigana:Example}}</div>
{{/Example}}

{{#Example translation}}
<div class=left><br>{{furigana:Example translation}}</div>
{{/Example translation}}

{{#Screenshot}}
<div><br>{{Screenshot}}</div>
{{/Screenshot}}

CSS:

.card {
 font-family: NotoSansJP;
 font-size: 24px;
 text-align: center;
 color: black;
 background-color: white;
 word-wrap: break-word;
}
.mac .card {
    position: absolute;
    max-width: 675px;
    top: 20px;
    bottom: 0;
    left: 20px;
    right: 20px;
    margin: auto;
}
.mobile .card a { color: black; text-decoration-color: #A1B2BA; }
.mac .card a { color: white; text-decoration-color: #A1B2BA; }
@font-face { font-family: "NotoSansJP"; src: url('_NotoSansJP-Regular.otf'); }
@font-face { font-family: "NotoSansJP"; src: url('_NotoSansJP-Bold.otf'); font-weight: bold; }

.big { font-size: 48px; }
.left { text-align: left; }
.small { font-size: 18px;}

.imgg {
-webkit-filter: invert(1);
filter: invert(1);
}

.mobile .img {
text-align: center;
margin: auto;
width: auto;
height: auto;
max-width: 50%;
max-height: 100%;
}

.mac .img {
text-align: center;
margin: auto;
width: auto;
height: auto;
}

svg > text { fill: #fff !important; }
svg > path { stroke: #fff !important; }
svg > circle[r="5"] { fill: #fff !important; }
svg > circle[r="3.25"] { fill: #2d2d2d !important; }

.mac a {
    text-decoration: inherit;
}

.frontcss rt {
    visibility: hidden;
}

Meaning field input:

<small><font color='#78909C'>Na-adjective, Noun</font></small> <br><b><font color='#4EAA72'><small>1.</small></font></b> proficient, skillful<br><small><font color='#78909C'>Noun, Suru-verb</font></small> <br><b><font color='#4EAA72'><small>2.</small></font></b> enjoying, satisfaction, satiation, having one's fill <font color='#9E9E9E'>(of)</font>

[jerryzhou196]

@morning-paradigm Thank you the templates - experimenting around for a solution! @saxoncameron That's awesome! Though I am not sure what exactly I did to fix it :). I had to undo my solution I commented about earlier after a new issue came up that some people couldn't see the addon after that update. As a result, I am still experimenting around. Will keep you guys updated!