@chat21/chat21-web-widget 5.1.32-rc9 → 5.1.33-rc8

package/src/app/component/message/json-sources/json-sources.component.scss

@@ -0,0 +1,197 @@
+:host {
+  --panel-bck: #f7f8fa;
+  --row-sep: rgba(66, 133, 244, 0.18);
+  --text: rgba(0, 0, 0, 0.90);
+  --muted: rgba(0, 0, 0, 0.62);
+  --accent: #1a73e8;
+  --pill-bck: #eaebf1;
+
+  font-family: "Google Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --title-line-height: 1.4;
+  --title-font-size: 14px;
+
+  --desc-line-height: 1.3;
+  --desc-font-size: 12px;
+
+  display: block;
+  width: 100%;
+  max-width: 652px;
+}
+
+.sources-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 8px 4px;
+  border-bottom: 1px solid var(--row-sep);
+}
+
+.sources-favicons {
+  display: flex;
+  align-items: center;
+}
+
+.header-favicon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  background: rgba(255, 255, 255, 0.7);
+  object-fit: cover;
+
+  & + & {
+    margin-left: -2px;
+  }
+}
+
+.sources-count {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.sources-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 12px 10px 12px;
+  background: var(--panel-bck);
+  border-radius: 18px;
+  font-size: 14px;
+  width: 100%;
+  max-width: 652px;
+  box-sizing: border-box;
+}
+
+.source-row {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 14px;
+  text-decoration: none;
+  color: inherit;
+  padding: 10px 10px;
+  border-radius: 12px;
+  transition: background 140ms ease;
+  font-family: 'Google Sans', Arial, sans-serif;
+  width: 100%;
+  box-sizing: border-box;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.55);
+    .source-row__title {
+      text-decoration: underline;
+    }
+  }
+
+  & + & {
+    border-top: 1px solid var(--row-sep);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .source-row__left {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1 1 auto;
+  }
+
+  .source-row__title {
+    font-weight: 500;
+    color: var(--text);
+    font-size: var(--title-font-size);
+    line-height: var(--title-line-height);
+    margin: 0px;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+  }
+
+  .source-row__desc {
+    font-size: var(--desc-font-size);
+    line-height: var(--desc-line-height);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: #56595e;
+    margin: 0;
+  }
+
+  .source-row__meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: auto;
+    padding-top: 2px;
+  }
+
+  .source-row__favicon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+    border: 2px solid #fff;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+  }
+
+  .source-row__host {
+    color: rgba(0, 0, 0, 0.55);
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  .source-row__thumb {
+    width: 56px;
+    height: 56px;
+    border-radius: 10px;
+    overflow: hidden;
+    flex: 0 0 auto;
+    border: 1px solid rgba(0, 0, 0, 0.06);
+    background: rgba(255, 255, 255, 0.65);
+    align-self: flex-start;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .source-row__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
+
+.show-all {
+  margin-top: 10px;
+  border: 0;
+  background: var(--pill-bck);
+  color: rgba(0, 0, 0, 0.78);
+  font-weight: 500;
+  padding: 10px 12px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: filter 140ms ease, transform 140ms ease;
+}
+
+.show-all:hover {
+  filter: brightness(0.98);
+  transform: translateY(-1px);
+}
+

package/src/app/component/message/json-sources/json-sources.component.ts

@@ -0,0 +1,89 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { getTopLevelDomainFromUrl } from 'src/app/utils/url-utils';
+
+export type JsonSourceItem = {
+  title?: string;
+  link?: string;
+  description?: string;
+  favicon?: string;
+  favicon_hd?: string;
+  image?: string;
+};
+
+@Component({
+  selector: 'chat-json-sources',
+  templateUrl: './json-sources.component.html',
+  styleUrls: ['./json-sources.component.scss']
+})
+export class JsonSourcesComponent {
+  @Input() items: JsonSourceItem[] = [];
+  @Input() themeColor?: string;
+  @Input() limit = 3;
+
+  @Output() onElementRendered = new EventEmitter<{ element: string; status: boolean }>();
+
+  showAll = false;
+
+  trackByLink = (_: number, item: JsonSourceItem) => item?.link || item?.title || _;
+
+  ngAfterViewInit() {
+    this.onElementRendered.emit({ element: 'json_sources', status: true });
+  }
+
+  getFavicon(item: JsonSourceItem): string | null {
+    const domain = getTopLevelDomainFromUrl(item?.link || '');
+    if (!domain) return null;
+    const explicit = (item?.favicon_hd || item?.favicon || '').trim();
+    if (explicit) {
+      try {
+        const faviconDomain = getTopLevelDomainFromUrl(explicit);
+        return faviconDomain ? explicit.replace(new URL(explicit).hostname, faviconDomain) : explicit;
+      } catch {
+        return explicit;
+      }
+    }
+    return `https://favicon.im/${domain}`;
+    //return `https://${domain}/favicon.ico`;
+  }
+
+  getHostname(item: JsonSourceItem): string {
+    const hostname = this.safeHostname(item?.link || '');
+    return hostname || '';
+  }
+
+  private safeHostname(url: string): string {
+    try {
+      return new URL(url).hostname.replace(/^www\./, '');
+    } catch {
+      return '';
+    }
+  }
+
+  get visibleItems(): JsonSourceItem[] {
+    if (!this.items) return [];
+    const normalizedLimit = Math.max(1, this.limit || 1);
+    return this.showAll ? this.items : this.items.slice(0, normalizedLimit);
+  }
+
+  get headerFavicons(): JsonSourceItem[] {
+    const seen = new Set<string>();
+    return (this.items || []).reduce<JsonSourceItem[]>((acc, item) => {
+      const url = this.getFavicon(item);
+      if (url && !seen.has(url)) {
+        seen.add(url);
+        acc.push(item);
+      }
+      return acc;
+    }, []).slice(0, 3);
+  }
+
+  get canExpand(): boolean {
+    const normalizedLimit = Math.max(1, this.limit || 1);
+    return (this.items?.length || 0) > normalizedLimit;
+  }
+
+  toggleShowAll() {
+    this.showAll = !this.showAll;
+  }
+}
+

package/src/app/component/message/like-unlike/like-unlike.component.html

@@ -1,21 +1,19 @@
 <div class="like-container">
     <div class="menu">
         <!-- LIKE -->
-        <button class="c21-button-clean c21-like" (click)="onClick('like')">
-            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
+        <button type="button" class="c21-button-clean c21-like" (click)="onClick('like')" aria-label="Like message">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
                 <path fill="black" d="M4.5,9h-3C0.7,9,0,9.6,0,10.4v10.4c0,0.8,0.7,1.5,1.5,1.5h3c0.8,0,1.5-0.7,1.5-1.5V10.5C6,9.7,5.3,9,4.5,9z"/>
                 <path fill="black" d="M24,10.5c-0.1-1.7-1.6-3-3.3-3h-4.5c0,0,0,0,0,0c0.4-1.2,0.7-2.2,0.7-2.7c0-1.6-1.2-3.2-3.3-3.2  c-2.2,0-2.8,1.5-3.3,2.7C8.8,8,7.5,7.4,7.5,8.6c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2c3.6-2.9,2.7-5.8,4.3-5.8  c0.8,0,1,0.6,1,1c0,0.3-0.4,1.9-1.2,3.4c-0.1,0.2-0.1,0.4-0.1,0.5c0,0.7,0.5,1.1,1.1,1.1h6.5c0.5,0,0.9,0.4,0.9,0.9  c0,0.5-0.4,0.8-0.8,0.9c-0.6,0-1,0.5-1,1.1c0,0.7,0.5,0.7,0.5,1.4c0,1.2-1.6,0.6-1.6,2c0,0.5,0.3,0.6,0.3,1c0,1.1-1.4,0.6-1.4,1.9  c0,0.1,0,0.2,0,0.2c0.1,0.6-0.3,1.1-0.9,1.1l-2.4,0c-1.2,0-2.4-0.4-3.4-1.1l-1.7-1.3c-0.2-0.2-0.4-0.2-0.7-0.2  c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.2,0.7,0.4,0.9l1.7,1.3c1.4,1,3,1.6,4.7,1.6h2.5c1.7,0,3-1.3,3.1-2.9c0,0,0,0,0,0  c0.8-0.6,1.3-1.5,1.3-2.6c0-0.1,0-0.3,0-0.4c0.8-0.6,1.4-1.5,1.4-2.6c0-0.2,0-0.5-0.1-0.7C23.5,12.6,24.1,11.6,24,10.5z"/>
-                <title id="altIconTitle">LIKE</title>
-            </svg>  
+            </svg>
         </button>
         <!-- UNLIKE -->
-        <button class="c21-button-clean" (click)="onClick('like')">
-            <svg role="img" aria-labelledby="altIconTitle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
-                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve">
+        <button type="button" class="c21-button-clean" (click)="onClick('unlike')" aria-label="Unlike message">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="24" height="24" viewBox="0 0 24 24" xml:space="preserve" aria-hidden="true" focusable="false">
                 <path d="M6,13.5V3c0-0.8-0.7-1.5-1.5-1.5h-3C0.7,1.5,0,2.2,0,3v10.5c0,0.8,0.7,1.5,1.5,1.5h3C5.3,15,6,14.3,6,13.5z"/>
                 <path d="M22.6,10.7c0.1-0.2,0.1-0.5,0.1-0.7c0-1.1-0.5-2-1.4-2.6c0-0.1,0-0.3,0-0.4c0-1-0.5-2-1.4-2.6c-0.1-1.6-1.5-2.9-3.1-2.9  h-2.5c-1.7,0-3.4,0.6-4.7,1.6L8,4.4C7.7,4.6,7.5,4.9,7.5,5.3c0,0.6,0.5,1.1,1.1,1.1c0.2,0,0.5-0.1,0.7-0.2L11,4.9  c1-0.7,2.2-1.1,3.4-1.1h2.5c0.5,0,0.9,0.4,0.9,0.9c0,0.2-0.1,0.2-0.1,0.4c0,1.3,1.4,0.8,1.4,1.9c0,0.4-0.3,0.5-0.3,1  c0,0.7,0.5,1,0.9,1.1c0.4,0.1,0.7,0.4,0.7,0.9c0,0.6-0.5,0.6-0.5,1.4c0,0.6,0.5,1.1,1,1.1c0.5,0,0.8,0.4,0.8,0.8  c0,0.5-0.4,0.9-0.9,0.9h-6.5c-0.6,0-1.1,0.5-1.1,1.1c0,0.2,0,0.4,0.1,0.5c0.8,1.6,1.2,3.1,1.2,3.4c0,0.4-0.3,1-1,1  c-0.6,0-0.7,0-1.2-1.3c-1.2-2.9-2.9-4.7-3.8-4.7c-0.6,0-1.1,0.5-1.1,1.1c0,0.3,0.1,0.7,0.4,0.9c3.2,2.6,2,6.2,5.7,6.2  c2.1,0,3.3-1.6,3.3-3.2c0-0.6-0.2-1.7-0.7-2.8h4.7c1.7,0,3.1-1.4,3.1-3.2C24,12.3,23.4,11.3,22.6,10.7z"/>
-                <title id="altIconTitle">UNLIKE</title>
             </svg>
         </button>
     </div>

package/src/app/component/message/like-unlike/like-unlike.component.spec.ts

@@ -1,16 +1,22 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance';
+import { CustomLogger } from 'src/chat21-core/providers/logger/customLogger';
+import { NGXLogger } from 'ngx-logger';
 
 import { LikeUnlikeComponent } from './like-unlike.component';
 
 describe('LikeUnlikeComponent', () => {
   let component: LikeUnlikeComponent;
   let fixture: ComponentFixture<LikeUnlikeComponent>;
+  const ngxlogger = jasmine.createSpyObj('NGXLogger', ['log', 'trace', 'debug', 'warn', 'error', 'info']);
+  const customLogger = new CustomLogger(ngxlogger);
 
   beforeEach(async () => {
+    LoggerInstance.setInstance(customLogger);
     await TestBed.configureTestingModule({
-      declarations: [ LikeUnlikeComponent ]
-    })
-    .compileComponents();
+      declarations: [LikeUnlikeComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +28,26 @@ describe('LikeUnlikeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('onClick should log icon id', () => {
+    spyOn((component as any).logger, 'debug');
+    component.onClick('like');
+    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
+  });
+
+  it('like button should have accessible name', () => {
+    const btn = fixture.debugElement.queryAll(By.css('button'))[0];
+    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Like message');
+  });
+
+  it('unlike button should have accessible name', () => {
+    const btn = fixture.debugElement.queryAll(By.css('button'))[1];
+    expect(btn.nativeElement.getAttribute('aria-label')).toBe('Unlike message');
+  });
+
+  it('clicking like should invoke logger', () => {
+    spyOn((component as any).logger, 'debug');
+    fixture.debugElement.queryAll(By.css('button'))[0].triggerEventHandler('click', {});
+    expect((component as any).logger.debug).toHaveBeenCalledWith('[LIKE-UNLIKE] onClick-->', 'like');
+  });
 });

package/src/app/component/message/return-receipt/return-receipt.component.spec.ts

@@ -1,6 +1,10 @@
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { MSG_STATUS_SENT } from 'src/chat21-core/utils/constants';
+import {
+  MSG_STATUS_RETURN_RECEIPT,
+  MSG_STATUS_SENT,
+  MSG_STATUS_SENT_SERVER,
+} from 'src/app/utils/constants';
 
 import { ReturnReceiptComponent } from './return-receipt.component';
 
@@ -10,31 +14,48 @@ describe('ReturnReceiptComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ ReturnReceiptComponent ]
-    })
-    .compileComponents();
+      declarations: [ReturnReceiptComponent],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ReturnReceiptComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
 
-  it('shold render MSG_STATUS_SENT icon', ()=> {
-    component.status= MSG_STATUS_SENT
+  it('should render schedule icon when status is falsy', () => {
+    component.status = 0 as any;
+    fixture.detectChanges();
+    const icons = fixture.debugElement.queryAll(By.css('.icon'));
+    expect(icons.length).toBe(1);
+  });
+
+  it('should render sent icon for MSG_STATUS_SENT', () => {
+    component.status = MSG_STATUS_SENT;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should render server-sent icon for MSG_STATUS_SENT_SERVER', () => {
+    component.status = MSG_STATUS_SENT_SERVER;
+    fixture.detectChanges();
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should render return receipt icon for MSG_STATUS_RETURN_RECEIPT', () => {
+    component.status = MSG_STATUS_RETURN_RECEIPT;
     fixture.detectChanges();
-    expect(component.status).toBe(MSG_STATUS_SENT)
-  })
-
-  // it('shold render MSG_STATUS_SENT icon', ()=> {
-  //   component.status= MSG_STATUS_SENT
-  //   fixture.detectChanges();
-  //   let element = fixture.debugElement.query(By.css('icon'))
-  //   expect(element.classes).toBeE('icon')
-  // })
+    expect(fixture.debugElement.queryAll(By.css('.icon')).length).toBe(1);
+  });
+
+  it('should expose status constants on component', () => {
+    expect(component.MSG_STATUS_SENT).toBe(MSG_STATUS_SENT);
+    expect(component.MSG_STATUS_SENT_SERVER).toBe(MSG_STATUS_SENT_SERVER);
+    expect(component.MSG_STATUS_RETURN_RECEIPT).toBe(MSG_STATUS_RETURN_RECEIPT);
+  });
 });

package/src/app/component/message/text/text.component.html

@@ -1,3 +1,3 @@
-<p  #messageEl class="message_innerhtml marked" 
-    [innerHTML]="printMessage(text, messageEl, this) | marked" 
-    [style.color]="color"></p>
+<div #messageEl class="message_innerhtml marked"
+    [innerHTML]="printMessage(text, messageEl, this) | marked"
+    [style.color]="color"></div>

package/src/app/component/message/text/text.component.scss

@@ -1,113 +1,107 @@
-// Shadow DOM styles - isolati dal resto dell'applicazione
 :host {
     display: block;
-    // Le variabili CSS custom properties possono attraversare il boundary del Shadow DOM
     font-size: var(--font-size-bubble-message, 14px);
 }
 
 .message_innerhtml {
     margin: 0px;
-    // padding: 0px 14px;
-    &.marked{
+
+    &.marked {
         padding: 12px 16px;
-        margin-block-start: 0em!important;
-        margin-block-end: 0em!important;
+        margin-block-start: 0em !important;
+        margin-block-end: 0em !important;
     }
-    
+
     .text-message {
         padding-top: 14px;
     }
-}
 
-p {
-    font-size: inherit;
-    margin: 0;
-    // padding: 14px;
-    line-height: 1.4em;
-    font-style: normal;
-    letter-spacing: normal;
-    font-stretch: normal;
-    font-variant: normal;
-    font-weight: 300;
-    overflow: hidden;
-}
+    p {
+        font-size: inherit;
+        margin: 0;
+        line-height: 1.4em;
+        font-style: normal;
+        letter-spacing: normal;
+        font-stretch: normal;
+        font-variant: normal;
+        font-weight: 300;
+        overflow: hidden;
+    }
 
-p ::ng-deep a,
-p a {
-    word-break: break-word;
-    color: inherit; // Eredita il colore dal parent
-    text-decoration: underline;
-}
+    a {
+        word-break: break-word;
+        color: inherit;
+        text-decoration: underline;
+    }
 
-p ::ng-deep p,
-p a:hover{
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-}
+    a:hover {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+    }
 
-p ol {
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-    padding-inline-start: 15px;
-    
-    li::before {
-        content: "";
-        font-size: 1.4em;
-        vertical-align: middle;
+    ol {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+        padding-inline-start: 15px;
+
+        li::before {
+            content: "";
+            font-size: 1.4em;
+            vertical-align: middle;
+        }
     }
-}
 
-// Stili aggiuntivi per elementi markdown comuni
-p h1, p h2, p h3, p h4, p h5, p h6 {
-    margin-block-start: 0.5em;
-    margin-block-end: 0.5em;
-    font-weight: bold;
-    color: inherit; // Eredita il colore dal parent
-}
+    h1, h2, h3, h4, h5, h6 {
+        margin-block-start: 0.5em;
+        margin-block-end: 0.5em;
+        font-weight: bold;
+        color: inherit;
+    }
 
-.message_innerhtml.marked h1 {
-    line-height: normal;
-}
+    &.marked h1 {
+        line-height: normal;
+    }
 
-p ul {
-    margin-block-end: 0em;
-    margin-block-start: 0em;
-    padding-inline-start: 15px;
-}
+    ul {
+        margin-block-end: 0em;
+        margin-block-start: 0em;
+        padding-inline-start: 15px;
+    }
 
-p code {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 2px 4px;
-    border-radius: 3px;
-    font-family: monospace;
-}
+    code {
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: 2px 4px;
+        border-radius: 3px;
+        font-family: monospace;
+    }
 
-p pre {
-    background-color: rgba(0, 0, 0, 0.05);
-    padding: 10px;
-    border-radius: 3px;
-    overflow-x: auto;
-}
+    pre {
+        background-color: rgba(0, 0, 0, 0.05);
+        padding: 10px;
+        border-radius: 3px;
+        overflow-x: auto;
+    }
 
-p blockquote {
-    border-left: 3px solid rgba(0, 0, 0, 0.1);
-    padding-left: 10px;
-    margin-left: 0;
-    font-style: italic;
-}
+    blockquote {
+        border-left: 3px solid rgba(0, 0, 0, 0.1);
+        padding-left: 10px;
+        margin-left: 0;
+        font-style: italic;
+    }
 
-p table {
-    border-collapse: collapse;
-    width: 100%;
-    margin: 10px 0;
-}
+    table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 10px 0;
+    }
 
-p table td, p table th {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    padding: 8px;
-}
+    table td, table th {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 8px;
+    }
 
-p table th {
-    background-color: rgba(0, 0, 0, 0.05);
-    font-weight: bold;
+    table th {
+        background-color: rgba(0, 0, 0, 0.05);
+        font-weight: bold;
+    }
 }