FR:Variable border depending on the length of the text in description

[kazdonkai]

こんにちは。さっそく使ってみましたが，Obsidian の表現力が高まって良いですね。
そこでお願いなのですが，description が長い場合には，それに応じて，枠を大きくして全部を参照できるようにして欲しいです。
よろしくご検討ください。

[nekoshita]

ご意見ありがとうございます！
card-linkの見た目はCSSによって決定されているので、個別にカスタマイズしたい場合はCSS snippetsでCSSを上書きすることができます。
こちらのドキュメントを参考にCSS snippetsで以下のCSSを追加してもらうと、おそらくdescriptionが全部参照できるようになるかと！

.auto-card-link-description {
    -webkit-line-clamp: unset !important;
    max-height: none !important;
}

[kazdonkai]

Snippet にCSS を登録しましたが，こんな感じになって上手く表示されていません

。

[nekoshita]

なるほど、そんなに長いdescriptionの場合もあるのですね💦

.auto-card-link-card {
  height: none;
}

こちらをcss snippetsに追加すると縦幅120pxの制約がなくなるので、無限に縦に伸びるようにはなります。
しかし、それ以外の部分にどのような影響が出てくるのかは分からないので、他の部分でデザインが崩れる可能性があります。

[nekoshita]

また、今回ご提案いただいた内容は私がこのプラグインを作った**とはずれてしまうので、プラグインのCSS自体の変更はしません。
これ以上のCSSに関するカスタマイズはご自身でお試しください！ご意見ありがとうございました！

[kazdonkai]

これでうまくいきました。
利用者としては、こちらを標準にしていただくと満足度が高いのでは？ ^_^;
せっかくdescription を取得しているのにそれが利用されないのはもったいないからです。
少なくとも、マニュアルに記載していただければ、今後リクエストが来ることはないと思います。
ありがとうございました。

.auto-card-link-card {
height: auto !important;
}
.auto-card-link-description {
-webkit-line-clamp: unset !important;
max-height: none !important;
}

[nekoshita]

参考画像までいただきありがとうございます！
画像を見ても、今実際にObsidianで使っていても、たしかにdescriptionが1行より多くの行数みれた方が良さそうと思いました！
ただ現状のやっつけCSSでは画面幅が狭くなったときに、縦幅がとんでもなく広がってしまうという問題があるので、もう少しCSS改善してみますー！

[kazdonkai]

確かに画面幅が狭いと邪魔ですね。
私は素人ですが、max-hight とか使えないのでしょうか？
そう言えば、ツィッターで紹介しておきました😄

[nekoshita]

そう言えば、ツィッターで紹介しておきました😄

ご紹介いただきありがとうございます！

#17 にて、可能な限りの対応を行いました！

• descriptionは最大で3行まで表示する
• READMEにCSS snippetsについて記載

また、以下の対応は検討しましたが行いませんでした。

• 縦幅を120pxより大きくすること
  • ノート全体の見づらくなってしまうため
  • 画像のサイズとのバランスが悪くなってしまうため
• レスポンシブデザインにして、画面の幅が狭いときにはスタイルを変更すること
  • CSSの@mediaを用いての実装を試みましたが、paneのwidthではなく、Obsidianのwindow全体の横幅に対して反応してしまうため、意図した挙動をさせることができなかったため

@kazdonkai
なので、申し訳ありませんが、descriptionを4行以上表示したい場合は、引き続きCSS snippetを利用した個別のカスタマイズとしてご利用よろしくお願い致します🙏