Widget:MainPageChangelog

<style>

 .widget-changelog{
   max-height: 280px;
   overflow-y: auto;
   padding-right: 5px;
   box-sizing: border-box;
 }

 .notice-item{
   display:flex;
   align-items:flex-start;
   gap:10px;
   background:#fff;
   border:1px solid #ddd; /* borda padrão */
   border-radius:6px;
   margin-bottom:10px;
   padding:8px 10px;
   box-sizing:border-box;
   --notice-color: var(--notice-color, #f5b700);
   border-left:5px solid var(--notice-color);
 }

 .notice-content{ flex:1; }

 .notice-title, .notice-title a{
   display:block;
   font-size:1.05rem; /* slightly smaller */
   font-weight:700;
   color:#333;
   text-decoration:none;
   margin:0;
   line-height:1.1;
 }
 .notice-title a:hover{ text-decoration: underline; }

 /* layout the text vertically and control spacing consistently */
 .notice-content{ display:flex; flex-direction:column; gap:6px; }

 /* header row: title left, date right */
 .notice-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
 .notice-header-left{ display:flex; align-items:center; gap:8px; }
 .notice-header-right{ white-space:nowrap; }

 .notice-date{ font-size:.85em; color:#888; margin:0; }
 .notice-desc{ color:#555; line-height:1.35; margin:2px 0 0 0; }
 /* icon: fixed size, responsive and separated from content */
 .notice-icon{
 width:32px;
 height:32px;
   object-fit:contain;
   flex-shrink:0;
   border-radius:4px;
   background:transparent;
 /* align icon visually with the top of the card/content */
 margin-top:6px;
 }

</style>